JQuery Datepicker - 没有默认日期

Posted 2023-05-07

【中文标题】JQuery Datepicker - 没有默认日期

【英文标题】：JQuery Datepicker - no default date

【发布时间】：2011-04-09 18:14:25

【问题描述】：

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

我尝试以下代码：

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

但它似乎不起作用。今天的日期仍被选为默认日期。

【参考方案1】：

我使用隐藏的 altField 解决了这个问题：

<div id="DatePicker"></div>
<input type="hidden" value="" name="Date" id="Date" />

以及以下脚本：

<script>
    $(function () 

        $('#DatePicker').datepicker(
            altField: '#Date', // ID of the hidden field
            altFormat: 'dd/mm/yy'
        );

        // Remove the style for the default selected day (today)
        $('.ui-datepicker-current-day').removeClass('ui-datepicker-current-day');

        // Reset the current selected day
        $('#Date').val('');
    );
</script>

然后，我在验证例程中使用了隐藏的#Date 字段。

【讨论】：

通过从子元素中删除 ui-state-active 和 ui-state-hover 获得了更好的结果。 $('.ui-datepicker-current-day .ui-state-active').removeClass('ui-state-active').removeClass('ui-state-hover');可能是版本变化所致

如果输入字段为空，如果我们可以在 onClose 内设置 altField 的日期值，那就太棒了。只是梦想超越最初的问题......

【参考方案2】：

在撰写本文时，没有一个答案真的对我有用，所以我的解决方案是从几个答案拼凑而成的（对于内联日期选择器）。

    $('.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

【讨论】：

这个工人代替我的第二行：$('.calendar').find(".ui-datepicker-current-day a ").removeClass("ui-state-highlight ui-state-active");

【参考方案3】：

这实际上是 jQuery UI Datepicker 的一个未解决问题。这是问题的票：

Ticket 8159

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

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

_getDefaultDate 方法在 defaultDate 选项为空或缺失时返回当前日期（这是问题的核心）。

我从这个改变了这个方法......

    _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;
,

_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);

最后，方法 _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 demo with defaultDate null

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

希望这对某人有所帮助！ :)

【讨论】：

感谢代码！我还必须在_adjustInstDate 函数中的day = Math.min(inst.selectedDay, this._getDaysInMonth(year, month)) + (period === "D" ? offset : 0), 之后添加day = day || 1;，以便单击箭头更改月份将在第一次单击时起作用。否则第一次点击不会改变月份。

不客气；很高兴它有帮助！也感谢您的更新。

【参考方案4】：

根据此处发布的答案，我设法做出了一些可行的方法。出于我的目的，我有一个始终可见的日历。如果您需要此弹出日历，您应该能够使用现有的onSelect 处理程序在第一次打开它时执行类似的操作。

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

谢天谢地，最新版本的 jQuery UI（撰写本文时为 1.10.2）真的就这么简单。它似乎不会干扰小部件的正常运行。唯一需要注意的是，使用 getDate getter 会导致通常是默认选择的日期。

就我的代码而言，这是可以接受的，因为我的用户在点击选择器中的有效日期之前无法继续（他们甚至没有继续按钮）。如果您不是这种情况，Florian Peschka's answer 之类的内容应该可以满足您的需求。

【讨论】：

重绘日历时会出现问题。例如。转到下个月，然后返回当前月份，“今天”被高亮显示，就好像它被选中一样。 （抱歉，我没有解决办法。）

好吧，您可能需要做一些小技巧来完成这项工作。鉴于我的用例，我可以简单地检查继续按钮是否可见（即用户选择了一个日期）。如果不是，我知道它仍然是默认选择，并且可以再次取消选择它。我不确定我将如何挂钩月份切换代码（可能在单击下一个/上一个按钮时），但我认为这不是不可能的。

是的，我在发布上述内容后不久就找到了onChangeMonthYear 函数，并使用它：onChangeMonthYear:function(year,month,inst) if(no_choice_yet)setTimeout(function()$("#datepicker .ui-state-active").removeClass("ui-state-active");,1);（奇怪的是，我没有评论解释为什么我将它包装在setTimeout 中；但是，即使不需要，也无妨。）

Darren cook > onSelect 和 onChangeMonthYear 等触发器在事件 beforeShowDay 之前触发。因此，如果没有 setTimeout，您将在实际绘制之前将其删除。

【参考方案5】：

要打开日期选择器对话框，它必须在某年的某个月份打开。我的意思是，你想显示这个对话框并且是空白的吗？...

我认为如果你不想传递任何默认日期，你能做的最好的就是获取当前日期：

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

传递这将失败，因为给定的 defaultDate，不是 null 而是空白

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

这将完成之前代码中的预期

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

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

【讨论】：

我当然做到了。你在删除它们之前阅读了我的 cmets 吗？

是吗？我没有... @AaronMiller

我以为你有，但很公平；要点是强制使用默认值会使表单验证无法确定，而更好的方法是在日期选择器 API。

【参考方案6】：

我在使用 inline 日期选择器时遇到了同样的问题。 该插件在今天的单元格/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

【参考方案7】：

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

【参考方案8】：

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

标记 (MVC)

<div class="leftContent">
     @Html.TextBox("DateShipOn", Nothing, New With .class = "DateShipOn", .readonly = "readonly")
</div>

HTML 输出：

<div class="leftContent">
    <input id="DateShipOn" class="DateShipOn hasDatepicker" type="text" value="" readonly="readonly" name="DateShipOn">
</div>

脚本（已准备好在文档中）：

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

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

上述代码的效果是输入框显示了'minDate'变量的值，点击输入时，日期选择器下拉，默认选择'minDate'。

注意：我们不允许手动输入，这是 'readonly' 属性的原因。

分辨率：

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

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

结果：

效果就是显示出来的；

输入（文本框）中没有默认日期值 用户无法输入输入（文本框） 日期选择器下拉，未选择默认日期 minDate 防止选择 minDate 值之前的日期 maxDate 防止选择 maxDate 值之后的日期

注意：根据我的要求，maxDate 的“+1m”将日期选择限制为从 minDate 值开始的 30 天。

希望这对某人有所帮助。

【参考方案9】：

我遇到了类似的问题，但有一个特定的行为。

（作为旁注，我认为预期的行为应该是从日历中的当前日期开始，但不是选择它。）

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

【参考方案10】：

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

(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();

【参考方案11】：

为我工作：

$(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");
);

【参考方案12】：

你也可以这样输入空值：

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

【参考方案13】：

你想“删除”默认日期是什么意思？

当没有月份开始时，您认为日期选择器将如何打开？！您必须有一个默认日期。

编辑您的评论

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

另一种方法是在用户单击日期选择器字段时创建一个设置为true 的变量。

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

【讨论】：

我的意思是，当然，当日期选择器打开时，我不想要一个选定的日期。在我的网站中，我想强制用户在继续之前做出选择。

如果设置正确，它将打开没有选择日期。 user352985 - 查看我发布的答案，它可以完成并且实际上可以很容易地完成。

我对此投了反对票，因为似乎自动假设应该默认选择今天的日期。如果您将日历用作任何类型的预订系统的基础，那将非常没有帮助 - 我的客户需要能够选择自己的日期。日期选择器功能基本上被破坏了。如果日期未在内部设置（使用批准的方法，如 API 中所述），则之后不应在日历上突出显示该日期。没有理由默认选择日历上的任何日期，这就是它的配置方式。

@NoelWhitemore 我所说的“你必须有一个默认日期”的意思是你需要在打开选择器时显示一些东西，对吧？如果没有默认日期，您会显示哪个月/年？如果没有默认日期，你怎么能决定显示什么？也许它不应该被选中，而只是决定显示哪个月/年，但你仍然需要一些东西来开始！

好的，我现在明白你的意思了 :) 可以将日历视图设置为当前月份（大多数用户会这样），但我认为今天的日期不适合自动选择，就好像用户自己已经点击了日历一样。 datepicker 小部件的问题是，当我使用 API 取消选择默认日期时，即使（内部）未设置日期，日期仍会在日历上突出显示。解决此问题的唯一方法似乎是手动删除 CSS 样式或修改 jQuery UI 代码。