使用Today和DateFormat的DatePicker

时间:2013-05-03 03:09:44

标签: html jquery-ui input datepicker buttonclick

我一直在尝试为datepicker创建一个jQuery UI函数,在阅读完所有的论坛和片段之后,我意识到绝大多数答案已被弃用和/或从jQuery 1.9.1中删除。< / p>

很简单,我需要有jquery datepicker

使用按钮选项显示日期选择器,并且今天能够单击,这将自动在输入字段中输入日期。对于我的生活,我无法弄清楚这一点,并希望将它扔给更熟悉jQuery / jQuery-UI的人。

曾尝试过像:

$(function() {
    $( "#date" ).datepicker(("setDate", new Date()){
        showButtonPanel: true,
        dateFormat: 'm-d-yy'
    });
  });

当然还有html

  <input name="date" id="date" />

输入值应采用标准美国日期格式:即2013年5月1日或12/31/2099。

截至目前,代码未选择当前日期,显然今天点击只会选择今天的日期。我需要它来自动填充输入字段。提前感谢您的帮助!

2 个答案:

答案 0 :(得分: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');

答案 1 :(得分:2)

我认为问题在于我们大多数人(我也是如此)错误地理解了“今天”按钮的功能。 事实上,它只是一个按钮,突出显示当前日期,而不是选择它。

如果您确实需要用户今天点击的行为,并且日期选择器选择当前日期,我建议您查看我创建的jsfiddle

由于这不是我的工作而且我刚刚做了一些研究(目前也在使用datepicker),我提到this解决方案,该解决方案适用于jQuery 1.9.1和jQuery UI 1.9.2。< / p>

这是解决您问题的代码

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