jquery ui中月份和年份选择器中的范围选择器答案

【问题标题】：range selector in month and year picker in jquery uijquery ui中月份和年份选择器中的范围选择器
【发布时间】：2015-09-24 12:02:20
【问题描述】：

我有两个文本框，使用 jquery-UI 选择月份和年份。这两个文本框都可以正常工作。现在我希望如果用户在 from(textbox) 中选择某个月份，则 to(textbox) 的 mindate(month) 应该是用户在 From textbox 中选择的月份。我怎么能做到这一点。这是我显示月份和年份选择器的代码。

            $("#<%=frm_txtdatefrm.ClientID %>").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'M yy'
        }).focus(function () {
            var thisCalendar = $(this);
            $('.ui-datepicker-calendar').detach();
            $('.ui-datepicker-close').click(function () {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                thisCalendar.datepicker('setDate', new Date(year, month, 1));
            });
        });

        $("#<%=frm_txtdateto.ClientID %>").datepicker({
            changeMonth: true,
            changeYear: true,
            showButtonPanel: true,
            dateFormat: 'M yy'
        }).focus(function () {
            var thisCalendar = $(this);
            $('.ui-datepicker-calendar').detach();
            $('.ui-datepicker-close').click(function () {
                var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
                var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
                thisCalendar.datepicker('setDate', new Date(year, month, 1));
            });
        });

【问题讨论】：

标签： jquery asp.net vb.net

【解决方案1】：

有一个在jQuery UI website 上选择日期范围的示例。

为onClose event 添加一个函数并为minDate 选项设置一个值。

这是示例中的代码：

$(function() {
    $( "#from" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#to" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3,
        onClose: function( selectedDate ) {
            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});

【讨论】：