jQuery-UI 日期选择器默认日期

Posted

技术标签:

【中文标题】jQuery-UI 日期选择器默认日期【英文标题】：jQuery-UI datepicker default date 【发布时间】：2011-04-19 05:54:36 【问题描述】：

我的 jQuery-UI 日期选择器有问题，我搜索了再搜索，但没有找到答案。我有以下代码：

<script type="text/javascript">
$(function()                
    $("#birthdate" ).datepicker(
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: '01-01-1985'
    );
);
</script>

我希望当用户单击#birthdate 输入时，当前日期选择为01-01-1985，现在它正在设置当前日期。

【问题讨论】：

你的代码是正确的，你能补充一些细节吗？ 你有什么问题？你的代码工作正常。 see it here 【参考方案1】：

尝试传入 Date 对象。我不明白为什么它不能以您输入的格式工作：

<script type="text/javascript">
$(function()                
    $("#birthdate" ).datepicker(
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985, 00, 01)
    );
);
</script>

http://api.jqueryui.com/datepicker/#option-defaultDate

指定实际日期通过 日期对象或作为字符串 当前日期格式，或多个 从今天开始的天数（例如 +7）或字符串 值和周期（'y' 表示年份， 'm' 代表几个月，'w' 代表几周，'d' 代表 天，例如'+1m +7d')，或者 null 今天。

【讨论】：

我在 jQuery UI 1.7.3 中遇到了与 OP 类似的问题 - 尽管在 1.8.4 中它很好（由于运行 jQuery 1.3.2 的旧系统必须运行 1.7.3） -使用日期对象修复了这一切。 非常感谢@Codesleuth 的回答。它对我帮助很大！ 上帝，我真的很讨厌 "00" = Javascript 的一月。幸运的是，我每次以这种方式声明日期对象时都会对其进行注释以避免任何混淆......【参考方案2】：

你可以试试下面的代码。

它将使默认日期成为您要查找的日期。

$('#birthdate').datepicker("setDate", new Date(1985,01,01) );

【讨论】：

整数世界中不允许使用前导零【参考方案3】：

看到：

如果该字段为空白，则设置在首次打开时突出显示的日期。通过 Date 对象或当前 dateFormat 中的字符串指定实际日期，或从今天开始的天数（例如 +7）或值和句点字符串（'y' 表示年份，'m' 表示月份， 'w' 表示几周，'d' 表示几天，例如 '+1m +7d'），或者 null 表示今天。

如果当前的dateFormat不被识别，你仍然可以使用new Date(year, month, day)的Date对象

在您的示例中，这应该有效（我没有测试过）：

<script type="text/javascript">
$(function()                
    $("#birthdate" ).datepicker(
        changeMonth: true,
        changeYear: true,
        yearRange: '1920:2010',
        dateFormat : 'dd-mm-yy',
        defaultDate: new Date(1985,01,01)
    );
);
</script>

【讨论】：

【参考方案4】：

如果您想根据某个服务器时间将突出显示的日期更新为不同的日期，您可以覆盖日期选择器代码以允许使用名为 localToday 或任何您想要命名的新自定义选项。

对jQuery UI DatePicker change highlighted "today" date中选定答案的小调整

// Get users 'today' date
var localToday = new Date();
localToday.setDate(tomorrow.getDate()+1); // tomorrow

// Pass the today date to datepicker
$( "#datepicker" ).datepicker(
    showButtonPanel: true,
    localToday: localToday    // This option determines the highlighted today date
);

我已经覆盖了 2 个日期选择器方法，以有条件地为“今天”日期使用新设置，而不是 new Date()。新设置称为localToday。

像这样覆盖 $.datepicker._gotoToday 和 $.datepicker._generatehtml：

$.datepicker._gotoToday = function(id) 
    /* ... */
    var date = inst.settings.localToday || new Date()
    /* ... */


$.datepicker._generateHTML = function(inst) 
    /* ... */
    tempDate = inst.settings.localToday || new Date()
    /* ... */

这是一个demo，它显示了完整的代码和用法：http://jsfiddle.net/NAzz7/5/

【讨论】：

【参考方案5】：

jQuery UI Datepicker 被编码为始终使用类ui-state-highlight 突出显示用户的本地日期。没有内置选项可以更改此设置。

在其他相关问题的答案中类似地描述的一种方法是覆盖该类的 CSS 以匹配您的主题的 ui-state-default，例如：

.ui-state-highlight 
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    color: #555555;

但是，如果您使用动态主题，或者如果您的意图是突出显示不同的一天（例如，让“今天”基于服务器的时钟而不是客户端的时钟），这并不是很有帮助。

另一种方法是覆盖负责突出显示当前日期的日期选择器原型。

假设您使用的是 UI javascript 的最小化版本，以下 sn-ps 可以解决这些问题。

如果您的目标是完全避免突出显示当天：

// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// remove the string "ui-state-highlight"
_generateHtml.toString().replace(' ui-state-highlight', '');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

这会将相关代码（为了便于阅读而最小化）更改为：

[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...]

到

[...](printDate.getTime() == today.getTime() ? '' : '') + [...]

如果您的目标是更改 datepicker 对“今天”的定义：

var useMyDateNotYours = '07/28/2014';
// copy existing _generateHTML method
var _generateHTML = jQuery.datepicker.constructor.prototype._generateHTML;
// set "today" to your own Date()-compatible date
_generateHTML.toString().replace('new Date,', 'new Date(useMyDateNotYours),');
// and replace the prototype method
eval('jQuery.datepicker.constructor.prototype._generateHTML = ' + _generateHTML);

这会将相关代码（为了便于阅读而最小化）更改为：

[...]var today = new Date();[...]

到

[...]var today = new Date(useMyDateNotYours);[...]
// Note that in the minimized version, the line above take the form `L=new Date,`
// (part of a list of variable declarations, and Date is instantiated without parenthesis)

除了useMyDateNotYours，你当然也可以注入一个字符串、函数或任何适合你需要的东西。

【讨论】：

谢谢！这可能不是 OP 所需要的，但这正是我所追求的。【参考方案6】：

Jquery Datepicker defaultDate 仅设置您在单击字段时弹出的日历上选择的默认日期。 如果您希望在用户单击该字段之前在您的输入中显示默认日期，您应该为您的字段提供一个 val()。 像这样的：

$("#searchDateFrom").datepicker( defaultDate: "-1y -1m -6d" );
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1));

【讨论】：

【参考方案7】： 
$("#birthdate" ).datepicker("setDate", new Date(1985,01,01))

【讨论】：

以上是关于jQuery-UI 日期选择器默认日期的主要内容，如果未能解决你的问题，请参考以下文章

JQuery-UI 日期选择器不起作用

为啥日期选择器中的日期格式没有改变？

jQuery 日期和时间选择器

更改下拉选择选项取决于日期选择器选择

Jquery日期选择器z-index问题

日期选择器不工作