jQuery UI 日期选择器范围选择

Question

我从他们的文档中知道，可以使用单个输入字段进行范围选择。

如何实现这一目标？我已经尝试了 jQuery UI 1.6 - jQuery 用户界面库 中建议的代码，但它似乎不起作用。这是我正在尝试的代码:

$(function(){     
       //create config object
       var pickerOpts = {
         rangeSelect: true,
         rangeSeparator: " to "
      };     
        //create the date picker
        $("#date").datepicker(pickerOpts); 
      });

发生的情况是，它只选择一个日期，不允许选择我正在寻找的范围。

Answer 1

这里有一个关于如何仅使用 jquery ui 和一个日期选择器来解决这个问题的想法。

    $("#date").datepicker({
    numberOfMonths: 2,
    onSelect: function( selectedDate ) {
        if(!$(this).data().datepicker.first){
            $(this).data().datepicker.inline = true
            $(this).data().datepicker.first = selectedDate;
        }else{
            if(selectedDate > $(this).data().datepicker.first){
                $(this).val($(this).data().datepicker.first+" - "+selectedDate);
            }else{
                $(this).val(selectedDate+" - "+$(this).data().datepicker.first);
            }
            $(this).data().datepicker.inline = false;
        }
    },
    onClose:function(){
        delete $(this).data().datepicker.first;
        $(this).data().datepicker.inline = false;
    }
})

这是一个 fiddle :http://jsfiddle.net/Z3FrL/3/