Question

我有一个JQuery日期选择器，允许您选择日期和月份。这一年是隐藏的。

除非我将minDate和maxDate添加到日期选择器设置中，否则一切正常。

我之所以设置它是因为他们不能改变岁月，我也希望它允许闰年。所以我将最小和最大日期设置为2012（最后一个闰年），以便他们可以选择2月29日。

当我点击日期文本框时，即使4月23日是设定日期，它也会在12月31日被选中。我删除minDate和maxDate后，当我选择日期文本框时，它会选择4月23日。

JSFiddle（minDate和maxDate）
JSFiddle（不含minDate和maxDate）

这是一个错误还是我可以做些什么来纠正这个？

我的代码：

$('#date').datepicker({
    altField: '#date_alt',
    altFormat: 'mm-dd',
    changeMonth: true,
    changeYear: false,
    dateFormat: 'MM d',
    showAnim: 'slideDown',
    yearRange: '-100:+0',
    minDate: new Date(2012, 1-1, 1),
    maxDate: new Date(2012, 12-1, 31),
    beforeShow: function(el, obj) {
       obj.dpDiv.addClass('datepicker_hideyear');
    },
    onClose: function(el, obj){
       setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000);
    }
});

更新

将defaultDate设置为2012日期可以解决问题，但不会设置日期选择器的值。它仅加载2012年4月23日和默认日期。

defaultDate: new Date('04/23/2012'),

我必须使用setDate来“选择”2012年4月23日，并设置为值，但最终会得到完全相同的结果。

$('#date').datepicker('setDate', new Date('04/23/2012'));

JSFiddle

Answer 1

问题是，当您将值添加到输入时，您没有指定年份。在您的beforeShow中添加提醒将显示您实际上正在获得2014年（alert($(this).datepicker("getDate"));。由于今年不在您的范围内，因此默认为可能的最长日期。

从输入中删除值并添加默认日期将使其正常工作：

<input type="text" name="date" id="date" />

并在你的datepicker初始化中添加：

defaultDate: new Date(2012, 4-1, 23),

经过一番挖掘，看起来这是jQueryUI的一个bug。如果未在dateformat字符串中指定年份格式，则无论如何都将默认为当前年份。这就是为什么setdate失败了。

这是一个解决方法：updated fiddle

这是我添加的内容

<div style="position:relative; display: inline-block;">
    <input type="text" id="date-placeholder" value="" />
    <input type="text" name="date" id="date" value="" style="visibility:hidden; position:absolute; left:0;" />
</div>

这基本上是创建一个占位符，用于向用户显示信息。 “#date”输入设置为visibility：hidden并且绝对定位在占位符上（以使datepicker弹出到应该的位置）。我没有设置display：none，因为datepicker无法工作，但是jquery仍然认为可见性：隐藏可见，所以它仍然可以工作。

然后在javascript中，我设置了一个新事件：

$("#date-placeholder").click(function () {
    $("#date").datepicker("show");
});

这只是在用户点击文本框时手动显示日期选择器。然后，在datepicker的onclose事件中：

onClose: function (el, obj) {
            setTimeout(function () {
                obj.dpDiv.removeClass('datepicker_hideyear');
            }, 1000);
            var val = $("#date").val();
            val = val.substr(0, val.length - 4);
            $("#date-placeholder").val(val);
        }

只需获取日期字段的当前值，然后删除最后4个字符（年份）并将占位符设置为该值。

初始化时还必须更改dateFormat字符串。这样可以让控件设置一年。

dateFormat: 'MM d yy',

代码可以修复，但看看小提琴，你会看到它是如何工作的。

Answer 2

您可以不使用datepicker方法的defaultDate属性，而不是在输入上使用值吗？

$('#date').datepicker({
    defaultDate: new Date('04/23/2012');
    altField: '#date_alt',
    altFormat: 'mm-dd',
    changeMonth: true,
    changeYear: false,
    dateFormat: 'MM d',
    showAnim: 'slideDown',
    yearRange: '-100:+0',
    minDate: new Date(2012, 1-1, 1),
    maxDate: new Date(2012, 12-1, 31),
    beforeShow: function(el, obj) {
       obj.dpDiv.addClass('datepicker_hideyear');
    },
    onClose: function(el, obj){
       setTimeout(function() { obj.dpDiv.removeClass('datepicker_hideyear'); }, 1000);
    }
});

没有年份问题的JQuery Datepicker与minDate和maxDate设置

2 个答案: