JQuery 数据采集器防止过去的日期

如何在 jQuery 数据采集器上禁用过去的日期?我寻找选项,但似乎没有找到任何表明能够禁用过去的日期。

更新: 感谢你们的快速反应。我试过了,但不走运。天仍然没有灰色出来,因为我期望,仍然接受选定的过去的日期。

我试过了:

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

没用的。

我试过了:

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

还是没用。

它可以很好地显示日历小部件。它只是不会变灰或阻止输入过去的日子。我曾经尝试过 minDate 和 maxDate,但没有成功,所以我认为肯定不是它们。

161451 次浏览

Use the minDate option to set the minimum possible date. http://jqueryui.com/demos/datepicker/#option-minDate

You just need to specify a minimum date - setting it to 0 means that the minimum date is 0 days from today i.e. today. You could pass the string '0d' instead (the default unit is days).

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

Try setting startDate to the current date. For example:

$('.date-pick').datePicker({startDate:'01/01/1996'});

Try this:

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

Remove the quotes from 0.

This works:

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

I am using following code to format date and show 2 months in calendar...

<script>
$(function() {


var dates = $( "#from, #to" ).datepicker({


showOn: "button",
buttonImage: "imgs/calendar-month.png",
buttonImageOnly: true,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 2,


onSelect: function( selectedDate ) {








$( ".selector" ).datepicker({ defaultDate: +7 });
var option = this.id == "from" ? "minDate" : "maxDate",




instance = $( this ).data( "datepicker" ),
date = $.datepicker.parseDate(
instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat,
selectedDate, instance.settings );


dates.not( this ).datepicker( "option", "dateFormat", 'yy-mm-dd' );




}
});
});


</script>

The problem is I am not sure how to restrict previous dates selection.

Remove the quotes surrounding 0 and it will work.

Working Code Snippet:

// set minDate to 0 for today's date
$('#datepicker').datepicker({ minDate: 0 });
body {
font-size: 12px; /* just so that it doesn't default to 16px (which is kinda huge) */
}
<!-- load jQuery and jQuery UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>


<!-- load jQuery UI CSS theme -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">


<!-- the datepicker input -->
<input type='text' id='datepicker' placeholder='Select date' />

Make sure you put multiple properties in the same line (since you only showed 1 line of code, you may have had the same problem I did).

Mine would set the default date, but didn't gray out old dates. This doesn't work:

$('#date_end').datepicker({ defaultDate: +31 })
$('#date_end').datepicker({ minDate: 1 })

This does both:

$('#date_end').datepicker({ defaultDate: +31, minDate: 1 })

1 and +1 work the same (or 0 and +0 in your case).

Me: Windows 7 x64, Rails 3.2.3, Ruby 1.9.3

If you are dealing with a previously bound date picker then setting

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

will not work. That syntax is applicable only when you are creating the widget.

To set min date for a bound date picker use the following:

$("#datePicker").datepicker("option", "minDate", 0);
var givenStartDate = $('#startDate').val();
alert('START DATE'+givenStartDate);
var givenEndDate = $('#endDate').val();
alert('END DATE'+givenEndDate);
var date = new Date();
var month = date.getMonth()+1;
var day = date.getDate();
var currentDate = date.getFullYear() + '-' +
(month<10 ? '0' : '') + month + '-' +
(day<10 ? '0' : '') + day;
if(givenStartDate < currentDate || givenEndDate < currentDate)
{
$("#updateButton").attr("disabled","disabled");
}
if(givenStartDate < currentDate && givenEndDate > currentDate)
{
$("#updateButton").attr("enabled","enabled");
}
if(givenStartDate > currentDate || givenEndDate > currentDate) {
$("#updateButton").attr("enabled","enabled");
}

Try this. If any mistake, please correct me :) Thanks all.

Give zero to mindate and it'll disabale past dates.

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

Live example

read more here

//disable future dates

$('#datetimepicker1').datetimepicker({
format: 'DD-MM-YYYY',
maxDate: new Date
});

//disable past dates

 $('#datetimepicker2').datetimepicker({
format: 'DD-MM-YYYY',
minDate: new Date
});

$("#datePicker").datePicker({startDate: new Date() });. This works for me

I used the min attribute: min="' + (new Date()).toISOString().substring(0,10) + '"

Here's my code and it worked.

<input type="date" min="' + (new Date()).toISOString().substring(0,10) + '" id="' + invdateId + '" value="' + d.Invoice.Invoice_Date__c + '"/>

enter image description here

This should work <input type="text" id="datepicker">

var dateToday = new Date();
$("#datepicker").datepicker({
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "datepicker" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});