Question

我有一个jQuery-UI datepicker的问题，我搜索和搜索但我找不到答案。我有以下代码：

<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时，现在它正在设置当前日期。

Answer 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

通过a指定实际日期 日期对象或作为字符串当前的dateFormat，或者是一些从今天起的天数（例如+7）或字符串价值观和期间（'年'， '几个月'，'w'几周，'d'代表天，例如'+ 1m + 7d'），或null 今天。

Answer 2

您可以尝试使用下面的代码。

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

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

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

Answer 4

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;
}

但是，如果您使用的是动态主题，或者您的目的是突出显示不同的一天（例如，为了＃34;今天＆＃34;基于您的服务器＆＃39;时钟而不是客户的时间。

另一种方法是覆盖负责突出显示当天的datepicker原型。

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

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

// 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() ? '' : '') + [...]

如果您的目标是更改日期选择器＆＃34;今天＆＃34;的定义：

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你当然也可以注入一个字符串，函数或任何适合你需要的东西。

Answer 5

如果您希望根据某些服务器时间将突出显示的日期更新为其他日期，则可以覆盖日期选择器代码以允许名为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个datepicker方法，有条件地使用“今天”日期的新设置而不是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/

Answer 6

Jquery Datepicker defaultDate仅设置您在单击字段时弹出的日历上选择的默认日期。如果您希望在用户单击字段之前将输入的默认日期设置为APPEAR，则应为字段指定val（）。像这样：

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

Answer 7

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

jQuery-UI datepicker默认日期

7 个答案: