I asked a pretty similar question a few days ago, but this one is different enough that I didn't feel like derailing the other helpful topic. I basically want to set up two text input fields and hook them both up with jQuery UI's Datepicker to have them act as a range... I want the second input field start date to be contingent upon what you've selected in the first input field. For instance if I select 10-25-2010 for the first field, then the earliest day you can select in the second field should be 10-26-2010. Any help or direction on this topic would be greatly appreciated!
-
here's a similar question: stackoverflow.com/questions/330737/…lock– lock2010-09-30 03:22:32 +00:00Commented Sep 30, 2010 at 3:22
Add a comment
|
4 Answers
$(function() {
$('#txtStartDate, #txtEndDate').datepicker({
showOn: "both",
beforeShow: customRange,
dateFormat: "dd M yy",
});
});
function customRange(input) {
if (input.id == 'txtEndDate') {
var minDate = new Date($('#txtStartDate').val());
minDate.setDate(minDate.getDate() + 1)
return {
minDate: minDate
};
}
}
crazy demo
1 Comment
Enrique
Reigel, your code works great, but which line should i change so it works fine with spanish date format like dd/mm/yyyy ? thanks
The jQuery UI datepicker documentation itself provides a nice example of how to link two datepickers to ensure valid date ranges.
See the example here: http://jqueryui.com/datepicker/#date-range
No extra plugin is needed, although if you wanted to create a simple one that would take the ids of the start and end date fields and plug in the necessary bits to the code hunk they give in the docs it would be pretty simple.
Comments
$('#firstinputfield').datepicker({
//your other configurations.
onSelect: function(){
var start = $('#firstinputfield').val();
var days = parseInt('1');
var date = new Date(start);
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
var edate= new Date(y, m, d+days);
$('#secondinputfield').datepicker({
//Your other configurations.
minDate:edate
});
}
});
Comments
onSelect: function(dateText, inst) {
try {
var date = $.datepicker.parseDate("dd/mm/yy", dateText);
if (date) {
date.setDate(date.getDate() + 1);
$("#secondDatePicker").datepicker("setDate", date);
}
}
catch(e) {}
}
