带有 Today 和 DateFormat 的 DatePicker
Posted
技术标签:
【中文标题】带有 Today 和 DateFormat 的 DatePicker【英文标题】:DatePicker With Today and DateFormat 【发布时间】:2013-04-27 09:19:45 【问题描述】:我一直在尝试为 datepicker 创建一个 jQuery UI 函数,在阅读了所有论坛和 sn-ps 之后,我意识到绝大多数答案已被弃用和/或从 jQuery 1.9.1 中删除.
很简单,我需要jquery datepicker
显示带有按钮选项的日期选择器,并且能够单击今天,这将自动将日期输入到我的输入字段中。对于我的生活,我无法弄清楚这一点,想把它扔给更了解 jQuery/jQuery-UI 的人。
试过类似的东西:
$(function()
$( "#date" ).datepicker(("setDate", new Date())
showButtonPanel: true,
dateFormat: 'm-d-yy'
);
);
当然还有 html
<input name="date" id="date" />
输入的值应为标准美国日期格式:即 5/1/2013 或 12/31/2099。
截至目前,代码并没有选择当前日期,显然点击今天只会选择今天的日期。我需要它来自动填充输入字段。提前感谢您的帮助!
【问题讨论】:
【参考方案1】:我认为问题在于我们大多数人(我也是)误解了“今天”按钮的功能。 事实上,它只是一个突出显示当前日期而不是选择它的按钮。
如果您确实想要用户点击今天并且日期选择器选择当前日期的行为,我建议您查看我创建的 jsfiddle。
由于这不是我的工作,我只是做了一些研究(目前也在使用 datepicker)我请参考 this 解决方案,它与 jQuery 1.9.1 和 jQuery UI 1.9.2 完美配合。
这是解决您问题的代码
$.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);
希望对你有帮助:)
编辑
要使用当前日期预填充您的输入字段,您需要使用setDate 方法。 更新fiddle
$('#datepicker').datepicker('setDate', new Date());
【讨论】:
您的回答有助于最终解决我的问题...非常感谢!但是最终的解决方案是结合您的答案和灭霸的 哦,看来我在解决方案中跳过了您的一些问题。预先填充输入是多么糟糕啊,这很容易 ^^ 当我看到你自己的答案时,我正要编辑我的帖子。已经创建了小提琴......刚刚发布了编辑。希望日期格式是正确的,因为您提到您希望它采用标准美国格式。 标准我们的格式是 md-yy....嗯,那有点不正确...mm-dd-yy 和 md-yy 都是美国格式,只有一个有前导 0,一个是清洁工...我更喜欢 md-yy 干得好。感谢您的帮助!【参考方案2】:我已为您创建了一个 EXAMPLE 1,它认为可以涵盖您所询问的内容。
编辑:更新了 EXAMPLE 2 并删除了初始日期选择。现在它开始时没有任何选定的日期。
HTML
<p>Date: <input type="text" id="datepicker" /></p>
JS(别忘了包括 jQuery UI 1.9.2 和 jQuery)
var $datepicker = $("#datepicker");
$datepicker.datepicker(
showButtonPanel: true,
dateFormat: 'm-d-yy'
);
$datepicker.datepicker('setDate');
【讨论】:
它确实有帮助,但是,如果我要切换日期,然后重新单击日历......今天按钮仍然没有任何功能。我喜欢那个 onLoad,但是日期是预先填充的……有什么想法吗?以上是关于带有 Today 和 DateFormat 的 DatePicker的主要内容,如果未能解决你的问题,请参考以下文章