jQuery Datepicker中的Todaybutton不起作用

我正在使用jQueryUI Datepicker并显示“今天”button。 但它不起作用。 它也不能在演示中工作： http : //www.jqueryui.com/demos/datepicker/#buttonbar

当按下此button时，我要在今天填写input。

是否有可能得到它的工作？

Answer 1

他们的代码并没有真正被破坏。 它只是没有做大多数人所期望的事情。 将今天的dateinput到input框中。 它所做的是突出显示用户在日历上看到今天的date。 如果他们在另一个月或另一年closures，则日历将popup回到当前视图，而不会取消select用户已select的date。

为了使它更直观，您需要更新插件代码以满足您的需求。 让我知道如何去。

你需要得到jquery-ui javascript的未压缩版本。 我正在看版本1.7.2和“_gotoToday”函数是在行6760上。只要将一个调用添加到_gotoToday，引发线6831上的_selectDate（）函数。:)快乐编码。

Answer 2

我不喜欢修改jQuery源代码的解决scheme，因为它消除了使用CDN的能力。 相反，您可以通过在您的页面的JavaScript范围文件中的某处添加基于@meesterjeeves的代码来重新分配_gotoToday函数：

 $.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相同，除了上面的两行代码。 因为这个选项对于我们今天的新含义是没有意义的，所以我们可以把gotoCurrent的整个gotoCurrent掉掉。

Answer 3

我认为处理这个问题的最好方法是重写库本身之外的_goToToday方法。 这解决了我的问题：

 var old_goToToday = $.datepicker._gotoToday $.datepicker._gotoToday = function(id) { old_goToToday.call(this,id) this._selectDate(id) } 

简单，并不要求你破解任何事件或改变任何基础function

Answer 4

只需将以下两行代码添加到_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)); }, 

Answer 5

虽然我知道这已经被接受，但这是基于Samy Zine的想法的扩展解决scheme。 这是使用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并把焦点放在页面中的下一个input/select上，但是这样做通常是不重要的，或者是特定于实现的。

作为一个例子，我在一个页面上做了这个工作，使用表格来布局（不要让我开始，我知道这是不好的做法！）：

 $associatedInput.closest('tr').next('tr').find('input,select').first().focus(); 

Answer 6

我不喜欢为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)); } })(); 

Answer 7

文件说什么“今天”button哪个标题可以通过改变

 .datepicker('option', 'currentText', 'New Title') 

只显示当前月份的变化。 这种行为也可以configuration

 .datepicker('option', 'gotoCurrent', true); 

之后按下button将显示月份更改为选定date的一个。

看来用这个button提交date是不可能的devise。

Answer 8

我为此目的添加了一个选项到datepicker：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)); 

Answer 9

我刚摆脱它。

在您的页面的一部分的一些CSS文件中：

 .ui-datepicker-current { visibility:hidden } 

Answer 10

您也可以尝试下面的代码以在点击今日button的input框中填写当前date。 只需将下面的代码放在_gotoToday函数中（在函数的结尾处）。

 this._selectDate(id, this._formatDate(inst, inst.selectedDay, inst.drawMonth, inst.drawYear)); 

请注意，我使用jQuery的datepicker版本1.8.5。

Answer 11

jQuery UIdateselect器今天链接

$('button.ui-datepicker-current').live('click', function() { $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); });

Answer 12

dateselect器被重构为至less10倍更棒。 新版本将解决这个问题。

http://wiki.jqueryui.com/w/page/12137778/Datepicker

Answer 13

您也可以尝试将其添加到脚本中：

 $('.ui-datepicker-current').live('click', function() { $(".datepicker").datepicker("setDate", date); }); 

（使用.livefunction而不是.click）

Answer 14

这是一个对我来说使用dateselect器的beforeShowcallback函数，而不是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 {}; } 

Answer 15

 $.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"> 

Answer 16

这是一个简单的黑客攻击

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

Answer 17

你应该使用选项：todayBtn：“linked”。 （而不是todayBtn：true）。

todayBtn布尔值，“链接”。 默认：false

如果为真或“链接”，则在dateselect器的底部显示“今日”button以select当前date。 如果为true，则“今天”button将只将当前date移动到视图中; 如果“链接”，当前date也将被选中。

有关更多详情，请参阅以下链接： http : //bootstrap-datepicker.readthedocs.io/en/latest/options.html#todaybtn

Answer 18

（请注意，这不是一个问题，我试图通过提供我的解决scheme来提供帮助，因为其他解决scheme对我不起作用。）

我无法让dateselect器与其他任何答案保持隐藏。 日历将closures，然后重新打开。 下面的代码为我工作改变今天button设置date到当天和closures日历。

jQuery UI – v1.11.4 jQuery JavaScript Library 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 });