开发者

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


Try to use onSelect or onClose event to change minDate and maxDate options.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜