Reputation: 13061
i'm using datePicker
in this way:
$("#dataStart").datepicker({
beforeShow: function () { $('#ui-datepicker-div').css('z-index',9999); },
dateFormat: 'mm/dd/yy'});
$("#dataEnd").datepicker({
beforeShow: function () { $('#ui-datepicker-div').css('z-index',9999); },
dateFormat: 'mm/dd/yy'});
I want to force select a date in future and not in the past, is there a possibility to do it? if so, is possible to change in a dynamic way for the second datepicker, so if user select a date, in the second field he has to select a date next to the first selected. i hope i ask as well my question :) Thanks all!
Upvotes: 4
Views: 22712
Reputation: 5082
This is an old thread but it's somewhat unclarified. Could be because of changes to the jQuery UI Widget itself, but for anyone stumbling upon this:
To limit datepickers scope to future dates only - set the minDate
param to 0.
To limit to past dates only you would set the maxDate
param to 0.
This is nice because it avoids having to call a new Date()
function as is suggested elsewhere in this thread.
Example:
$('.your_datepicker').datepicker({
minDate: 0
});
Upvotes: 0
Reputation: 30099
minDate:1
should only allow dates tomorrow and onward. Then add an onselect
to restrict dataEnd
:
$("#dataStart").datepicker({
minDate: 1,
onSelect: function(theDate) {
$("#dataEnd").datepicker('option', 'minDate', new Date(theDate));
},
beforeShow: function() {
$('#ui-datepicker-div').css('z-index', 9999);
},
dateFormat: 'mm/dd/yy'
});
Reference: http://blog.alagad.com/2009/04/20/playing-with-jquery-datepicker/
Example: http://jsfiddle.net/jtbowden/F39kt/
Upvotes: 12
Reputation: 69915
If you return [false] in beforeShowDay
event of datepicker it disables that day. You can compare the date and the current date and return [true/false] accordingly.
Try this.
$("#dataStart").datepicker({
beforeShow: function () {
$('#ui-datepicker-div').css('z-index',9999);
},
dateFormat: 'mm/dd/yy',
});
$("#dataEnd").datepicker({
beforeShow: function () {
$('#ui-datepicker-div').css('z-index',9999);
},
dateFormat: 'mm/dd/yy',
beforeShowDay: function(date){
return [(date > ($("#dataStart").datepicker("getDate")
|| new Date()))];
}
});
Upvotes: 2
Reputation: 76003
http://jqueryui.com/demos/datepicker/.
Look at the minDate
option. You can set it dynamically with the option
method.
Upvotes: 0
Reputation: 1529
Try this...
var dates=$("#from, #to").datepicker({
changeMonth:true, onSelect: function( selectedDate ) {
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", option, date );
}
});
Upvotes: 0
Reputation: 7631
var myDate = new Date();
myDate.setDate(myDate.getDate()+10);
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' + myDate.getFullYear();
$("#thedate").datepicker({dateFormat: 'mm/dd/yy',altFormat: 'yyyymmdd'});
$("#thedate").val(prettyDate);
This is how I do it. 'thedate' is my datepicker. I'm bumping the date to today + 10 days.
Upvotes: 0