JQuery Datepicker – 没有默认日期

我想删除JQuery Datepicker中的默认日期。

我尝试以下代码:

$(this).datepicker({defaultDate: ''}); 

但它似乎没有用。 今天的日期仍被选为默认日期。

我使用隐藏的altField来解决问题:

 

和以下脚本:

  

然后,我在validation例程中使用了隐藏的#Date字段。

在写这篇文章时,没有一个答案真的对我有用,所以这里是我的解决方案从几个答案拼凑而成(对于内联日期选择器)。

  $('.calendar').datepicker("setDate", null); // this unsets the datepicker's internal selected date; it still shows a highlight on today's date that looks like a selected date though $('.calendar').find(".ui-datepicker-current-day").removeClass("ui-datepicker-current-day"); // this actually removes the highlight 

这实际上是jQuery UI Datepicker的一个开放问题。 这是问题的门票:

门票8159

这个问题的核心是Datepicker错误地处理defaultDate值为null 。 在这里提供的解决方案中,我喜欢最好的j-polfer ,并因此推崇它。 但是,此解决方案的工作原因是,如果将null传递给date参数,则setDate方法中内置了一个补丁来清除选择。 但是我想找出为什么 Datepicker没有正确响应选项中的defaultDate:null ,所以我看了一下源代码。

我发现我需要对Datepicker源代码进行三处更改才能解决此问题。 以下是我所做的更改:

  1. defaultDate选项为null或缺失时,方法_getDefaultDate返回当前日期(这是问题的核心)。

我改变了这个方法……

  _getDefaultDate: function(inst) { return this._restrictMinMax(inst,this._determineDate(inst,this._get(inst, "defaultDate"), new Date())); } 

对……

 _getDefaultDate: function(inst) { var def = this._get(inst, "defaultDate"); return def !== null ? this._restrictMinMax(inst, this._determineDate(inst, def , new Date())): null; }, 
  1. 方法_setDate将选定的日期设置为当null传递到date参数时的当前日期。 我改为行来纠正这个:

我换了这条线……

 inst.selectedDay = inst.currentDay = newDate.getDate(); 

至…

 inst.selectedDay = date == null? 0: inst.currentDay = newDate.getDate(); 

这条线……

 this._adjustInstDate(inst); 

至…

 if (date != null) { this._adjustInstDate(inst); } 
  1. 最后,方法_generateHTML没有从_getDefaultDate处理null的返回值。

所以我改变了这条线……

  (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime()) ? 

至…

 (defaultDate != null && (defaultDate.getTime() === printDate.getTime() && defaultDate.getTime() === selectedDate.getTime())) ? 

而已。 现在, Datepicker defaultDate选项更直观地响应传入的null值或缺少此选项。

 $('#test').datepicker({ altField: '#alt'}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: null}); // No date selected $('#test').datepicker({ altField: '#alt', defaultDate: 0}); // Today selected $('#test').datepicker({ altField: '#alt', defaultDate: +1}); // Tomorrow selected $('#test').datepicker({ altField: '#alt', defaultDate: -1}); // Yesterday selected 

这是JSFIDDLE中的演示: Datepicker 演示,其中defaultDate为null

请注意:这些更改尚未经过详尽的测试,因此_getDefaultDate方法现在可能会返回null,因此可能会出现其他问题。 所以先做自己的测试吧! ;)

希望这有助于某人! 🙂

根据这里发布的答案,我设法制作了有用的东西。 为了我的目的,我有一个始终可见的日历。 如果您需要弹出日历,则应该能够使用现有的onSelect处理程序在第一次打开时执行类似的操作。

 $("selector").datepicker(/* options */).find(".ui-state-active").removeClass("ui-state-active"); 

值得庆幸的是,使用最新版本的jQuery UI(撰写本文时为1.10.2)非常简单。 它似乎不会干扰小部件的正确运行。 唯一需要注意的是,使用getDate getter会产生通常默认的选定日期。

出于我的代码的目的,这是可以接受的,因为我的用户无法继续(他们甚至没有继续按钮),直到他们从选择器点击了有效日期。 如果情况并非如此,那么Florian Peschka的回答应该能满足您的需求。

要打开datepicker对话框,必须在某年的某个月打开它。 我的意思是,你想显示这个对话框并且是空白的?…

我想如果您不想传递任何默认日期,您可以做的最好的事情是获取当前日期:

 $(document).ready(function() { $('#datepicker').datepicker(); }); 

传递此方法将失败,因为给定defaultDate,不是null但是空白

 $(this).datepicker({defaultDate: ''}); 

这可以完成前面代码中的预期

 $(this).datepicker({defaultDate: null}); 

但它的行为与此答案中的第一个代码块相同。

我使用内联 datepicker有同样的问题。 插件添加到今天的cell / td类.ui-datepicker-current-day和.ui-state-active。 我的解决方案是使用自定义类,例如.ui-datepicker-selected-day,并实现beforeShowDay来处理自己所选日期的显示。 像这样的东西:

 $("datepicker").datepicker({ beforeShowDay: function(date) { var dateIso = $.datepicker.formatDate("yy-mm-dd", date); var dateSelected = $("input").val(); var classDate = ""; if(dateSelected === dateIso){ return [false,"ui-datepicker-selected-day"]; }else{ return [true]; } } 

要放入“突出显示”单元格的css示例:

 .ui-widget-content .ui-datepicker-selected-day .ui-state-active{ background-color: red; } + disable some css from the plugin 

我使用$('.datefield').val('')显示空白而不是显示默认日期。

我知道这是一个老问题,我发现它是因为我有同样的要求; 不要在输入(文本框)中显示日期,让用户从日期选择器中选择一个日期。

标记(MVC)

 
@Html.TextBox("DateShipOn", Nothing, New With {.class = "DateShipOn", .readonly = "readonly"})

HTML输出:

 

脚本(准备好文件):

 $('.DateShipOn').datepicker({ constrainInput: true, display: true, border: true, background: true, maxDate: "+1m", minDate: new Date('@minDate') }); $('.DateShipOn').datepicker("setDate", new Date()); 

上面代码的效果是输入框中显示了’minDate’变量的值,当点击输入时,datepicker下拉,默认选择’minDate’。

注意:我们不允许手动输入,这就是’readonly’属性的原因。

解析度:

就我而言,我所要做的就是评论/删除该行:

 $('.DateShipOn').datepicker("setDate", new Date()); 

结果:

效果是显示;

  • 输入(文本框)中没有默认日期值
  • 用户无法输入输入(文本框)
  • 日期选择器下降,未选择默认日期
  • minDate可以防止选择minDate值之前的日期
  • maxDate可防止选择maxDate值后的日期

注意:根据我的要求,maxDate的’+ 1m’将日期选择限制为minDate值的30天。

希望这有助于某人。

我有类似的问题,但有一个特定的行为。

(作为旁注,我认为预期的行为应该是从日历中的当前日期开始,而不是选择它。)

我的实现包括一个带有隐藏输入altField的内联日历。 我所做的是删除altField选项,并添加一个更新它的onSelect函数。 这样,今天的日期仍然看起来被选中,但代表真实值的隐藏字段保持为空。

我的解决方案涉及覆盖jQuery的追加,以便我们可以在每次重新生成HTML并将其附加到div时删除元素。 这样可以在切换月份时修复默认日期的闪烁,并且还可以清除hover。

 (function($) { var origAppend = $.fn.append; $.fn.append = function () { return origAppend.apply(this, arguments).trigger("append"); }; })(jQuery); var datePickerDiv = $("#date-picker"); datePickerDiv.bind("append", function() { $(this).find(".ui-datepicker-days-cell-over").removeClass("ui-datepicker-days-cell-over"); $(this).find(".ui-datepicker-today a ").removeClass("ui-state-highlight ui-state-active ui-state-hover"); }); datePickerDiv.datepicker(); 

适合我:

 $(document).ready(function() { $("#datepicker .ui-state-active").removeClass("ui-state-active"); $("#datepicker .ui-state-highlight").removeClass("ui-state-highlight"); $("#datepicker .ui-datepicker-today").removeClass("ui-datepicker-today"); }); 

想要“删除”默认日期是什么意思?

你认为当没有月份开始时,日期选择器会打开吗?! 您必须有一个默认日期。

编辑您的评论

根据需要设置默认日期,如果用户已更改,请检查。 如果是这样,他选择了一个自定义日期。

另一种方法是创建一个用户单击datepicker字段时设置为true的变量。

如果用户提交表单,则检查该变量。 如果是,则用户选择了日期。 如果没有,他没有触及datepicker字段。