JQuery datepicker - 2 inputs From and To

I am using the jQuery dump plugin with this time addon in two input boxes, one for the date "From", and the second with the Date "Date".

When I set the first, I want the second to be one day after the date selected in the first, turning off all dates before the date selected on the From

If the To date is selected first, then the From date is set to the day before the To date.

I found some examples, but I do not know how to get the date over time . So, if I, for example, select 13/12/2010 15:50 on the From date, the date on Date is set to 14/12/2010 15:50 > or at least until 14 /12/ 2010 00:00 .

EDITED ***

I just found this piece of code that works the way I want, but without the timepicker addons.

$(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, is it possible to adapt it so that I can use it with the timepicker addon?

thanks in advance

+6
jquery jquery-ui-datepicker
source share
2 answers

I have most of it, but I couldn't figure out how to set hourMin and minuteMin after the widget has 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 is 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 here: http://jsfiddle.net/RWjtL/3/

Most of your criteria are met, but there are a few things that are disabled:

  • When you set the "To" field to blank, the date of the date "Date" of the date "From" is not deleted. I tried setting the minDate parameter to null and "" and got weird behavior. Here is a registered issue that may be related .
  • The beforeShow method beforeShow called several times. I think this is due to the call to setDate inside the handler, but cannot be sure.
  • As mentioned above, after the fact, I was not able to set hourMin and minuteMin , and setting minDate does not seem to take the time part of the date into account.

The author of the GitHub page has a list of issues, some of which seem to be related to the issues I am facing. Hope you get started at least.

+1
source share

Try using onSelect or onClose to change minDate and maxDate options.

0
source share

All Articles