JQuery datepicker- 2 inputs From and To

Question

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 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

Answer 1

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 to null 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 to setDate inside the handler, but can't be sure.
• As stated above, I could not manage to set hourMin and minuteMin after the fact, and setting the minDate 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.