JQuery Datepicker - 无默认日期

Question

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

我试试下面的代码：

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

但它似乎并没有工作。今天的日期仍然被选为默认日期。

Answer 1

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

我想，如果你不想通过任何默认的日期，你能做的最好的是获得当前日期：

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

传递，这将失败，因为给defaultDate，不为空，但空

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

这是什么，会做什么打算在前面的代码

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

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

Answer 2

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

你认为日期选择器会在没有月份的时候打开吗？！你有有有一个默认日期。

编辑您的评论

，只要你想，检查设置一个默认的日期，如果用户已经改变了它。如果是这样，他选择了一个自定义日期。

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

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

Answer 3

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

（作为一个方面说明，我认为预期的行为应该是一开始就在日历中的当前日期，但不选择它。）

我的实现包含在一个隐藏的输入altField内嵌日历。我所做的是删除altField选项，并添加更新它的onSelect函数。这样今天的日期仍然看起来很有选择性，但是代表真实价值的隐藏字段保持空白。

Answer 4

我得到全面的问题，采用了隐藏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 5

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

Answer 6

根据这里发布的答案，我设法做出了一些有效的工作。为了我的目的，我有一个总是可见的日历。如果您需要使用弹出式日历，则应该可以使用现有的onSelect处理程序在首次打开时执行类似的操作。

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

值得庆幸的是，这真的是使用jQuery UI的最新版本（1.10.2写这篇文章的）简单。它似乎不会干扰小部件的正确功能。唯一需要注意的是，使用getDate获得者会得到通常默认选择日期的结果。

对于我的代码的目的，这是可以接受的，我的用户无法继续（他们甚至没有继续按钮），他们点击了来自拾取器的有效日期至。如果情况并非如此，那么像Florian Peschka's answer这样的应用程序就会为您提供所需的功能。

Answer 7

我使用直列日期选择器相同probleme。 插件添加今天的单元格/ 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 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()); 

上面的代码的效果是，输入框在显示AND时具有'minDate'变量的值，当点击输入时，日期选择器下降，默认情况下选择'minDate'。

注意：我们不允许手动输入，这是“只读”属性的原因。

分辨率：

我不得不这样做，在我的情况，是评论/删除行：

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

结果：

的效果是，上显示;

• 有一个在输入（文本框）没有默认日期值
• 用户不能输入在输入（文本框）
• 日期选择器落下与选定默认日期
• 的的minDate防止日期之前被选择的的minDate值
• 的的maxDate防止日期的的maxDate值之后，从被选择

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

希望这可以帮助别人。

Answer 9

写这篇文章时没有答案真的对我有用，所以这里是我解答几个答案（对于内联日期选择器）的解决方案。

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

这实际上是一个悬而未决的问题与jQuery UI的日期选择器。下面是问题的票：

Ticket 8159

这个问题的心脏是，日期选择器不正确地处理的空一个defaultDate值的事实。在这里提供的解决方案中，我喜欢j-polfer最好的，因为这个原因upvoted。但是，此解决方案的工作原因是因为setDate方法中内置了一个修补程序，用于在将null传递给date参数时清除选择。但我想找出为什么 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; 
}, 

方法_setDate被设置所选择的天到当天当空通入日期参数。我改线来纠正这一点：

我改变了这条线......

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处理空的返回值。

所以我改变了这条线......

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

到...

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

就是这样。现在，日期选择器默认日期选项更直观地响应空值被传入或丢失该选项。

$('#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方法现在可以返回引起的其他问题空值。所以先做自己的测试吧！ ;）

希望这可以帮助别人！ :)

Answer 11

我的解决方案涉及覆盖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 12

工作对我来说：

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