JQuery Datepicker - 没有默认日期

Question

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

我尝试以下代码：

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

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

Answer 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 字段。

Answer 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

Answer 3

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

Ticket 8159

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

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

1. _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;
},

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 demo with defaultDate null

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

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

Answer 4

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

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

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

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

Answer 5

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

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

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

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

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

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

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

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

Answer 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

Answer 7

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

Answer 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 天。

希望这对某人有所帮助。

Answer 9

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

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

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

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

Answer 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");
});

Answer 12

你也可以这样输入空值：

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

Answer 13

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

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

编辑您的评论

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

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

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