JQuery datepicker- 2 inputs From and To
I am using the Jquery datepicker plugin with this timepicker addon in two input boxes, one for the "From" date and the second with the "To" date.
When I set the first one, I want the second one to be one day after the date selected in the first,disabling all the dates earlier than the date selected in the "From" date
If the "To" date is selected first, then the "From" date is set to the day before the "To" date.
I have found some examples, but I don't know how to get the date with time.So,If I ,for example, select 13/12/2010 15:50 in the "From" date, the date in the "To" date is set to 14/12/2010 15:50 or at least to 14/12/2010 00:00.
EDITED***
I've just found开发者_StackOverflow中文版 this piece of code that works as I want , but without the timepicker addon.
$(function(){
$('#dateFrom').datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
$('#dateTo').datepicker('option','minDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
}
});
$('#dateTo').datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateText, inst) {
$('#dateFrom').datepicker('option','maxDate', new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay));
}
});
});
Based on the above code, would it be possible to adapt it ,so that I can use it with the timepicker addon?
Thanks beforehand
I've got most of it, but could not figure out how to set the hourMin
and minuteMin
after the widget had already been initialized. Given the following HTML:
<label for="from">From</label><input id="from" name="from" />
<label for="to">To</label><input id="to" name="to" />
And this JS:
$("#from").datetimepicker();
$("#to").datetimepicker({
beforeShow: function(input, inst) {
var $toDateInput = $("#to");
var fromDate = $("#from").datetimepicker("getDate");
var toDate = $toDateInput.datetimepicker("getDate");
var afterFromDate;
if (fromDate) {
if (!toDate || (toDate <= fromDate)) {
afterFromDate = new Date(fromDate.toUTCString());
afterFromDate.setDate(afterFromDate.getDate() + 1);
$toDateInput.datetimepicker("setDate", afterFromDate);
}
$toDateInput.datetimepicker("option", "minDate", fromDate);
}
}
});
See it here: http://jsfiddle.net/RWjtL/3/
Most of your criteria are met, but there are a few things that are off:
- When you set the 'To' field blank, the 'From' datepicker's min date is not removed. I tried setting the
minDate
option tonull
and""
and got weird behavior. Here's a documented issue that could be related. - The
beforeShow
method is called multiple times. I think this is because of the call tosetDate
inside the handler, but can't be sure. - As stated above, I could not manage to set
hourMin
andminuteMin
after the fact, and setting theminDate
doesn't seem to respect the time part of the date.
The author's GitHub page has a list of issues, some of which seem related to the issues I ran into. Hope that gets you started at least.
Try to use onSelect or onClose event to change minDate and maxDate options.
精彩评论