带有范围选择的jquery ui datepicker答案

【问题标题】：jquery ui datepicker with range selection带有范围选择的jquery ui datepicker
【发布时间】：2014-01-07 12:06:29
【问题描述】：

我想在我的 asp.net aspx 页面上使用 jQuery UI datepicker。我想在 jQuery UI 日历上选择一个范围和一个确定按钮。我还找到了一个链接：

jQuery UI Datepicker - Range Selection with Only One Control

但是当我使用此页面上的代码并单击文本框时，几乎有 4 个日历水平出现，而且样式混乱。我不确定该页面需要哪些文件，哪些是额外的。

请建议如何像这样使用 jQuery UI 日期选择器。

【问题讨论】：

你能提供你的代码或jsfiddle上的演示吗？
我是第一次创建 jsfiddle，不知道如何加载相关文件。请检查此jsfiddle.net/gVt3K

标签： javascript jquery asp.net jquery-ui datepicker

【解决方案1】：

从提供的链接开始，我用相关代码构建了一个 jsfiddle。我看不到您面临的问题。

代码：

$.datepicker._defaults.onAfterUpdate = null;

var datepicker__updateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function (inst) {
    datepicker__updateDatepicker.call(this, inst);

    var onAfterUpdate = this._get(inst, 'onAfterUpdate');
    if (onAfterUpdate) onAfterUpdate.apply((inst.input ? inst.input[0] : null), [(inst.input ? inst.input.val() : ''), inst]);
}

$(function () {

    var cur = -1,
        prv = -1;
    $('#jrange div')
        .datepicker({
        //numberOfMonths: 3,
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,

        beforeShowDay: function (date) {
            return [true, ((date.getTime() >= Math.min(prv, cur) && date.getTime() <= Math.max(prv, cur)) ? 'date-range-selected' : '')];
        },

        onSelect: function (dateText, inst) {
            var d1, d2;

            prv = cur;
            cur = (new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay)).getTime();
            if (prv == -1 || prv == cur) {
                prv = cur;
                $('#jrange input').val(dateText);
            } else {
                d1 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.min(prv, cur)), {});
                d2 = $.datepicker.formatDate('mm/dd/yy', new Date(Math.max(prv, cur)), {});
                $('#jrange input').val(d1 + ' - ' + d2);
            }
        },

        onChangeMonthYear: function (year, month, inst) {
            //prv = cur = -1;
        },

        onAfterUpdate: function (inst) {
            $('<button type="button" class="ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all" data-handler="hide" data-event="click">Done</button>')
                .appendTo($('#jrange div .ui-datepicker-buttonpane'))
                .on('click', function () {
                $('#jrange div').hide();
            });
        }
    })
        .position({
        my: 'left top',
        at: 'left bottom',
        of: $('#jrange input')
    })
        .hide();

    $('#jrange input').on('focus', function (e) {
        var v = this.value,
            d;

        try {
            if (v.indexOf(' - ') > -1) {
                d = v.split(' - ');

                prv = $.datepicker.parseDate('mm/dd/yy', d[0]).getTime();
                cur = $.datepicker.parseDate('mm/dd/yy', d[1]).getTime();

            } else if (v.length > 0) {
                prv = cur = $.datepicker.parseDate('mm/dd/yy', v).getTime();
            }
        } catch (e) {
            cur = prv = -1;
        }

        if (cur > -1) $('#jrange div').datepicker('setDate', new Date(cur));

        $('#jrange div').datepicker('refresh').show();
    });

});

演示：http://jsfiddle.net/IrvinDominin/LALED/

【讨论】：

【解决方案2】：

发件人：<input type="text" name="date_from" id="date_from" />
收件人：<input type="text" name="date_to" id="date_to" />

$(function() {
   $("#date_from").datepicker({
       changeMonth: true,
       changeYear: true,
       numberOfMonths: 1,
       showOn: "button",        
       showAnim: "slideDown",
       dateFormat: "yy-mm-dd",
       onClose: function(selectedDate) {
           $("#date_to").datepicker("option", "minDate", selectedDate);
       }
   });
   $("#date_to").datepicker({
       changeMonth: true,
       changeYear: true,
       numberOfMonths: 1,
       showOn: "button",        
       showAnim: "slideDown",
       dateFormat: "yy-mm-dd",
       onClose: function(selectedDate) {
           $("#date_from").datepicker("option", "maxDate", selectedDate);
       }
    });
});

链接演示：http://jsfiddle.net/wimarbueno/fpT6q/1/

【讨论】：

【解决方案3】：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

试试这个。

【讨论】：

它是否允许像我发布的链接那样进行范围选择？
是的，只需复制它并在一个简单的 date.html 文件中尝试它就可以了。日期范围。