我正在使用 jQueryUI Datepicker 并显示“今天”按钮。但它不起作用。它在演示中也不起作用：http ://www.jqueryui.com/demos/datepicker/#buttonbar
按下此按钮时，我想用今天的内容填写输入。
有可能让它工作吗？
问问题
67085 次
19 回答
87
我不喜欢修改 jQuery 源代码的解决方案，因为它消除了使用 CDN 的能力。相反，您可以重新分配 _gotoToday 函数，方法是在页面的 JavaScript 范围文件中的某处包含基于@meesterjeeves 答案的代码：
$.datepicker._gotoToday = function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
// the below two lines are new
this._setDateDatepicker(target, date);
this._selectDate(id, this._getDateDatepicker(target));
}
this._notifyChange(inst);
this._adjustDate(target);
}
上面的代码与 1.10.1 版本的 jQuery UI Datepicker 基本相同，除了上面标记的两行。整个 mumble-jumbogotoCurrent实际上可以删除，因为该选项对于我们“今天”的新含义没有意义。
于 2011-09-30T17:14:55.873 回答
47
他们的代码并没有真正被破坏。它只是没有做大多数人期望它做的事情。也就是在输入框中输入今天的日期。它的作用是突出显示用户在日历上查看今天的日期。如果他们在另一个月或另一年关闭，日历会弹出回今天的视图，而不会取消选择用户已经选择的日期。
为了使其更直观，您需要更新插件代码以满足您的需求。让我知道事情的后续。
您需要获取 jquery-ui javascript 的未压缩版本。我正在查看 1.7.2 版，“_gotoToday”函数位于第 6760 行。只需在 _gotoToday 中添加一个调用，该调用会触发第 6831 行的 _selectDate() 函数。:) 快乐编码。
于 2009-07-02T19:35:44.557 回答
29
我认为处理这个问题的最好方法是在库本身之外覆盖 _goToToday 方法。这为我解决了这个问题：
var old_goToToday = $.datepicker._gotoToday
$.datepicker._gotoToday = function(id) {
old_goToToday.call(this,id)
this._selectDate(id)
}
简单，不需要您破解任何事件或更改任何底层功能
于 2012-04-10T18:25:41.693 回答
10
您应该使用以下todayBtn选项：
$("...").datepicker({
todayBtn: "linked"
})
（而不是todayBtn: true）。
今天Btn
布尔值，“链接”。默认值：假
如果为 true 或“linked”，则在日期选择器底部显示“Today”按钮以选择当前日期。如果为真，“今天”按钮只会将当前日期移动到视图中；如果“链接”，当前日期也将被选中。
有关更多详细信息，请查看以下链接： http ://bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn
于 2017-04-02T07:12:03.657 回答
9
只需将以下两行代码添加到 _gotoToday 函数中...
/* Action for current link. */
_gotoToday: function(id) {
var target = $(id);
var inst = this._getInst(target[0]);
if (this._get(inst, 'gotoCurrent') && inst.currentDay) {
inst.selectedDay = inst.currentDay;
inst.drawMonth = inst.selectedMonth = inst.currentMonth;
inst.drawYear = inst.selectedYear = inst.currentYear;
}
else {
var date = new Date();
inst.selectedDay = date.getDate();
inst.drawMonth = inst.selectedMonth = date.getMonth();
inst.drawYear = inst.selectedYear = date.getFullYear();
}
this._notifyChange(inst);
this._adjustDate(target);
/* ### CUSTOMIZATION: Actually select the current date, don't just show it ### */
this._setDateDatepicker(target, new Date());
this._selectDate(id, this._getDateDatepicker(target));
},
于 2010-07-26T17:30:29.853 回答
9
虽然我知道这已经被接受，但这是我基于Samy Zine 想法的扩展解决方案。这是使用 jQuery 1.6.3 和 jQuery UI 1.8.16，并在 Firefox 6 中为我工作。
$('.ui-datepicker-current').live('click', function() {
// extract the unique ID assigned to the text input the datepicker is for
// from the onclick attribute of the button
var associatedInputSelector = $(this).attr('onclick').replace(/^.*'(#[^']+)'.*/gi, '$1');
// set the date for that input to today's date
var $associatedInput = $(associatedInputSelector).datepicker("setDate", new Date());
// (optional) close the datepicker once done
$associatedInput.datepicker("hide");
});
您可能还希望将blur()注意力$associatedInput集中在页面中的下一个输入/选择上，但这通常不是简单的操作，或者是特定于实现的。
例如，我在我正在处理的使用表格进行布局的页面上执行此操作（不要让我开始，我知道这是不好的做法！）：
$associatedInput.closest('tr').next('tr').find('input,select').first().focus();
于 2011-09-23T04:22:58.007 回答
7
我不喜欢在 jQuery 源代码中添加额外代码的想法。而且我不想_gotoToday通过在javascript代码中的某处复制粘贴其实现并在底部添加额外的行来覆盖方法。
因此，我使用以下代码对其进行了调整：
(function(){
var original_gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(id) {
var target = $(id),
inst = this._getInst(target[0]);
original_gotoToday.call(this, id);
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
}
})();
于 2012-03-16T15:12:11.917 回答
3
我刚刚摆脱了它。
在您页面的某些 CSS 文件中：
.ui-datepicker-current {
visibility:hidden
}
于 2009-07-14T20:15:58.050 回答
2
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur();
});
于 2013-07-26T07:50:02.570 回答
2
为此，我在日期选择器中添加了一个选项：selectCurrent。
为此，您只需将以下内容添加到未压缩的 js 文件中：
1) 在函数 Datepicker() 的末尾，添加：
selectCurrent: false // True to select the date automatically when the current button is clicked
2) 在 _gotoToday 函数的最后，添加：
if (this._get(inst, 'selectCurrent'))
this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear));
于 2011-01-26T11:05:01.143 回答
2
您也可以尝试使用以下代码在单击“今天”按钮时在输入框中填写当前日期。只需将以下代码_gotoToday放在jquery.ui.datepicker.js.
this._selectDate(id, this._formatDate(inst,
inst.selectedDay, inst.drawMonth, inst.drawYear));
请注意，我使用的是 1.8.5 版的 jquery datepicker。
于 2010-12-30T05:40:31.630 回答
2
文档说明了可以通过哪些“今天”按钮更改标题
.datepicker('option', 'currentText', 'New Title')
仅将显示的月份更改为当前月份。也可以配置此行为
.datepicker('option', 'gotoCurrent', true);
之后，按下按钮会将显示的月份更改为所选日期的月份。
设计上似乎不可能使用此按钮提交日期。
于 2009-07-02T09:59:17.087 回答
2
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<input type="text" id="id">于 2016-04-05T05:27:07.550 回答
1
这是一个对我有用的 hack，它使用 Datepicker 的 beforeShow 回调函数，而不是 live() 方法。
,beforeShow: function(input, datepicker) {
setTimeout(function() {
datepicker.dpDiv.find('.ui-datepicker-current')
.text('Select Today')
.click(function() {
$(input)
.datepicker('setDate', new Date())
.datepicker('hide');
});
}, 1);
return {};
}
于 2013-08-15T23:02:01.910 回答
1
您也可以尝试将其添加到您的脚本中：
$('.ui-datepicker-current').live('click', function() {
$(".datepicker").datepicker("setDate", date);
});
（使用 .live 功能而不是 .click）
于 2011-09-09T08:25:23.067 回答
1
日期选择器被重构为至少 10 倍更棒。新版本将解决这个问题。
于 2011-02-28T04:46:18.973 回答
1
这是一个简单的黑客
$(function() {
var _gotoToday = $.datepicker._gotoToday;
$.datepicker._gotoToday = function(a){
var target = $(a);
var inst = this._getInst(target[0]);
_gotoToday.call(this, a);
$.datepicker._selectDate(a, $.datepicker._formatDate(inst,inst.selectedDay, inst.selectedMonth, inst.selectedYear));
target.blur();
}
$( “#datepicker” ).datepicker({
showButtonPanel: true
});
});
于 2017-02-28T04:12:21.697 回答
0
我以不同的方式解决了它。
我发现导航到某个日期很烦人，然后即使它已经被选中（在单击下一个/上一个月份之后），也必须记住单击该日期。
在这里，当我们移动月份/年份时，我直接更新输入字段 - 当单击 Today 按钮时也会触发。I also need the change event to fire whenever the selection has changed.
$input.datepicker({
...
onChangeMonthYear: function (year, month, inst)
{
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
if (!isNaN(date))
{
input.value = $.datepicker.formatDate("dd M yy", date);
$input.change();
}
}
}
于 2019-06-08T08:07:16.077 回答
-1
（请注意，这不是问题。我试图通过提供我的解决方案来提供帮助，因为其他解决方案对我不起作用。）
我无法让日期选择器隐藏在任何其他答案中。日历将关闭然后重新打开。下面的代码为我更改了“今天”按钮以将日期设置为当天并关闭日历。
jQuery UI - v1.11.4 jQuery JavaScript 库 v1.11.1 IE 11.0.28
为了完整性，我已经包含了我的默认值。
$.datepicker._gotoToday = function(id) {
var inst = this._getInst($(id)[0]);
var date = new Date();
this._selectDay(id, date.getMonth(), date.getFullYear(), inst.dpDiv.find('td.ui-datepicker-today'));
}
$.datepicker.setDefaults({
changeMonth: true,
maxDate: 'today',
numberOfMonths: 1,
showButtonPanel: true
});于 2016-02-27T02:28:53.443 回答