jquery - rango - deshabilitar dias futuros en datepicker

deshabilitar fechas pasadas en el selector de fechas

Question

¿Cómo deshabilitar fechas pasadas de la fecha actual en un datetimepicker? Intenté algunas publicaciones con preguntas similares, pero no pude lograrlo. A continuación, es lo que intenté

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
$(''#datetimepicker2'').datetimepicker({
language: ''en'',
pick12HourFormat: true
});
});
</script>
<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
<i data-date-icon="icon-calendar">
</i>
</span>

Yo tambien lo intenté

$("datetimepicker2").datepicker({ changeYear: true, dateFormat: ''dd/mm/yy'', showOn: ''none'', showButtonPanel: true, minDate:''0d'' }); 

y

$("#datetimepicker2").datepicker({ minDate: 0 });

Answer 1

** Esto funcionó en mi plugin de wordpress **

 jQuery(document).ready(function($) {
$("#datepicker").datepicker({ minDate: 0});
});

Answer 2

Dale cero a la mindate y deshabilitará las fechas pasadas.

$( "#datepicker" ).datepicker({ minDate: 0});

Aquí hay un ejemplo de trabajo de Live Fiddle http://jsfiddle.net/mayooresan/ZL2Bc/

La documentación oficial está disponible aquí.

Answer 3

Establezca una fecha de finalización basada en la fecha de inicio con datepicker

 $("#AddEvent_txtStartDate").datepicker({
onSelect: function () {
minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
var mDate = new Date(minDate.setDate(minDate.getDate()));
$("#AddEvent_txtEndDate").datepicker("setDate", mDate);
$("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
}
});
$("#AddEvent_txtEndDate").datepicker();

Answer 4

Problema fijo :)

abajo está el código de trabajo

$(function(){
$(''#datepicker'').datepicker({
startDate: ''-0m''
//endDate: ''+2d''
}).on(''changeDate'', function(ev){
$(''#sDate1'').text($(''#datepicker'').data(''date''));
$(''#datepicker'').datepicker(''hide'');
});
})

Answer 5

Prueba esto,

$("#datetimepicker2").datepicker({ startDate: "+0d" });

Answer 6

Puedes usar

$(''#li_from_date'').appendDtpicker({
"dateOnly": true,
"autodateOnStart": false,
"dateFormat": "DD/MM/YYYY",
"closeOnSelected": true,
"futureonly": true
});

Answer 7

Si desea establecer la fecha en la carga de la página, utilice esto:

 $(''#datetimepicker1'').datetimepicker({
minDate: new Date()
});

Esto establecerá la fecha de hoy como fecha de inicio en la carga de la página y deshabilitará todas las fechas anteriores.
Pero si desea establecer la fecha al hacer clic en un cuadro de texto en particular en lugar de hacerlo en la carga de la página, use esto: $(''#datetimepicker1'').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $(''#datetimepicker1'').data("DateTimePicker").minDate(new Date()); }); $(''#datetimepicker1'').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $(''#datetimepicker1'').data("DateTimePicker").minDate(new Date()); });

En lugar de la nueva fecha (), podemos usar cualquier cadena que especifique la fecha en un formato especificado por nosotros si no queremos establecer la fecha actual como fecha mínima. p.ej:

$(''#datetimepicker1'').data("DateTimePicker").minDate("10/15/2018");

Answer 8

acaba de introducir el parámetro startDate como se menciona a continuación.

var todaydate = new Date();
$(".leave-day").datepicker({
autoclose: true,
todayBtn: "linked",
todayHighlight: true,
startDate: todaydate
}
).on(''changeDate'', function (e) {
var dateCalendar = e.format();
dateCalendar = moment(dateCalendar, ''MM/DD/YYYY'').format(''YYYY-MM-DD'');
$("#date-leave").val(dateCalendar);
});

Answer 9

esto funciona para mi

$(''#datetimepicker2'').datetimepicker({
startDate: new Date()
});

Answer 10

prueba esto,

$( "#datepicker" ).datepicker({ minDate: new Date()});

Aquí, la nueva fecha () implica la fecha de hoy ....

Answer 11

Para deshabilitar fechas pasadas , agrega este js dado:

var $input = $(''.datepicker'').pickadate();
var picker = $input.pickadate(''picker'');
picker.set(''min'',true);`][1]

Answer 12

minDate: dateToday Or minDate: ''0'' es la clave aquí. Trate de establecer la propiedad minDate.

$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 2,
showButtonPanel: true,
minDate: dateToday // minDate: ''0'' would work too
});
});

Lee mas

Answer 13

Esto funcionará:

 var dateToday = new Date();
$(function () {
$("#date").datepicker({
minDate: dateToday
});
});

Answer 14

var dateToday = new Date();
$(''#datepicker'').datepicker({
''startDate'': dateToday
});

Answer 15

$(function () {
$("#date").datepicker({ minDate: 0 });
});

Answer 16

$("#datetimepicker2").datepicker({
dateFormat: "mm/dd/yy",
minDate: new Date()
});

Answer 17

<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
<input type="text" class="form-control" id="input_id" name="input_name" />
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
</div> 

Answer 18

Try this''
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$(''#example'').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker(''getDate'');
$(''#to_date'').datepicker(''setDate'', minDate);
$(''#to_date'').datepicker(''option'', ''maxDate'', 0);
$(''#to_date'').datepicker(''option'', ''minDate'', minDate);
}
});
$(''#to_date'').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$(''#example'').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker(''getDate'');
$(''#to_date'').datepicker(''setDate'', minDate);
$(''#to_date'').datepicker(''option'', ''maxDate'', 0);
$(''#to_date'').datepicker(''option'', ''minDate'', minDate);
}
});
$(''#to_date'').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$(''#example'').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker(''getDate'');
$(''#to_date'').datepicker(''setDate'', minDate);
$(''#to_date'').datepicker(''option'', ''maxDate'', 0);
$(''#to_date'').datepicker(''option'', ''minDate'', minDate);
}
});
$(''#to_date'').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$(''#example'').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker(''getDate'');
$(''#to_date'').datepicker(''setDate'', minDate);
$(''#to_date'').datepicker(''option'', ''maxDate'', 0);
$(''#to_date'').datepicker(''option'', ''minDate'', minDate);
}
});
$(''#to_date'').datepicker({
dateFormat: "mm/d/yy"
});
});
</script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<!-- table -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<!-- end table -->
<script>
$(function() {
$(''#example'').DataTable();
$("#from_date").datepicker({
dateFormat: "mm/d/yy",
maxDate: 0,
onSelect: function () {
var minDate = $(this).datepicker(''getDate'');
$(''#to_date'').datepicker(''setDate'', minDate);
$(''#to_date'').datepicker(''option'', ''maxDate'', 0);
$(''#to_date'').datepicker(''option'', ''minDate'', minDate);
}
});
$(''#to_date'').datepicker({
dateFormat: "mm/d/yy"
});
});
</script>