jQuery-UI 日期选择器默认日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3829033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery-UI datepicker default date
提问by Alesio
I have a problem with the jQuery-UI datepicker, I have searched and searched but I didn't find the answer. I have the following code:
我的 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>
I want that when the user click in the #birthdateinput that the current date selected to be 01-01-1985, now it's setting the current date.
我希望当用户单击#birthdate当前日期选择为的输入时01-01-1985，现在它正在设置当前日期。
回答by Codesleuth
Try passing in a Dateobject instead. I can't see why it doesn't work in the format you have entered:
尝试传入一个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
http://api.jqueryui.com/datepicker/#option-defaultDate
Specify either an actual date via a Date objector as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
通过 Date 对象或当前 dateFormat 中的字符串指定实际日期，或从今天起的天数（例如 +7）或一串值和句点（'y' 表示年，'m' 表示月， 'w' 表示周，'d' 表示天，例如 '+1m +7d')，或者今天为 null。
回答by Umakanta.Swain
You can try with the code that is below.
您可以尝试使用下面的代码。
It will make the default date become the date you are looking for.
它将使默认日期成为您要查找的日期。
$('#birthdate').datepicker("setDate", new Date(1985,01,01) );
回答by Shikiryu
Seeing that:
看见那个：
Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today.
如果该字段为空，则将日期设置为在首次打开时突出显示。通过 Date 对象或当前 dateFormat 中的字符串指定实际日期，或从今天起的天数（例如 +7）或一串值和句点（'y' 表示年，'m' 表示月， 'w' 表示周，'d' 表示天，例如 '+1m +7d')，或者今天为 null。
If the current dateFormat is not recognized, you can still use the Date object using new Date(year, month, day)
如果当前的 dateFormat 无法识别，您仍然可以使用 Date 对象 new Date(year, month, day)
In your example, this should work (I didn't test it) :
在您的示例中，这应该有效（我没有测试过）：
<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>
回答by Cory Danielson
If you want to update the highlighted day to a different day based on some server time, you can override the Date Picker code to allow for a new custom option named localTodayor whatever you'd like to name it.
如果您想根据某个服务器时间将突出显示的日期更新为不同的日期，您可以覆盖日期选择器代码以允许命名新的自定义选项localToday或您想要的任何名称。
A small tweak to the selected answer in jQuery UI DatePicker change highlighted "today" date
对jQuery UI DatePicker 中所选答案的小调整突出显示“今天”日期
// 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
});
I've overridden 2 datepicker methods to conditionally use a new setting for the "today" date instead of a new Date(). The new setting is called localToday.
我已经覆盖了 2 个 datepicker 方法来有条件地使用“今天”日期的新设置而不是new Date(). 新设置称为localToday。
Override $.datepicker._gotoTodayand $.datepicker._generateHTMLlike this:
覆盖$.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()
/* ... */
}
Here's a demowhich shows the full code and usage: http://jsfiddle.net/NAzz7/5/
这是一个演示，显示了完整的代码和用法：http: //jsfiddle.net/NAzz7/5/
回答by user3378165
Jquery Datepicker defaultDate ONLY set the default date that you chose on the calendar that pops up when you click on your field. If you want the default date to APPEAR on your input before the user clicks on the field you should give a val() to your field. Something like this:
Jquery Datepicker defaultDate 仅设置您在单击字段时弹出的日历上选择的默认日期。如果您希望在用户单击字段之前在您的输入中显示默认日期，您应该为您的字段提供一个 val()。像这样的东西：
$("#searchDateFrom").datepicker({ defaultDate: "-1y -1m -6d" });
$("#searchDateFrom").val((date.getMonth()) + '/' + (date.getDate() - 6) + '/' + (date.getFullYear() - 1));
回答by Synexis
jQuery UI Datepicker is coded to always highlight the user's local date using the class ui-state-highlight. There is no built-in option to change this.
jQuery UI Datepicker 被编码为始终使用 class 突出显示用户的本地日期ui-state-highlight。没有内置选项可以更改此设置。
One method, described similarly in other answers to related questions, is to override the CSS for that class to match ui-state-defaultof your theme, for example:
在相关问题的其他答案中类似描述的一种方法是覆盖该类的 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;
}
However this isn't very helpful if you are using dynamic themes, or if your intent is to highlight a different day (e.g., to have "today" be based on your server's clock rather than the client's).
但是，如果您使用动态主题，或者您的意图是突出显示不同的一天（例如，让“今天”基于您的服务器的时钟而不是客户端的时钟），这并不是很有帮助。
An alternative approach is to override the datepicker prototype that is responsible for highlighting the current day.
另一种方法是覆盖负责突出显示当前日期的日期选择器原型。
Assuming that you are using a minimized version of the UI javascript, the following snippets can address these concerns.
假设您使用的是 UI javascript 的最小化版本，以下代码片段可以解决这些问题。
If your goal is to prevent highlighting the current day altogether:
如果您的目标是完全避免突出显示当天：
// 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);
This changes the relevant code (unminimized for readability) from:
这将相关代码（未最小化以提高可读性）从：
[...](printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') + [...]
to
到
[...](printDate.getTime() == today.getTime() ? '' : '') + [...]
If your goal is to change datepicker's definition of "today":
如果您的目标是更改日期选择器对“今天”的定义：
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);
This changes the relevant code (unminimized for readability) from:
这将相关代码（未最小化以提高可读性）从：
[...]var today = new Date();[...]
to
到
[...]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)
Instead of useMyDateNotYoursyou could of course also instead inject a string, function, or whatever suits your needs.
useMyDateNotYours当然，你也可以注入一个字符串、函数或任何适合你需要的东西。
回答by venkat7668
$("#birthdate" ).datepicker("setDate", new Date(1985,01,01))
