jqueryui datepicker点击今天按钮如何设置控件值

  2015-11-4更新:自己重写jqueryui datepicker的_gotoToday私有方法也行

$.datepicker._gotoToday = function (id) {
  $(id).datepicker('setDate', new Date()).datepicker('hide').blur();
}; 

  jqueryui的datepicker插件点击今天按钮时,只是跳转到当天所在的月份,而不是设置控件的值为今天。要想点击今天这个按钮后设置控件值为当天的内容,可以自己写代码来实现。获取datepicker弹出层对象,添加click事件,判断点击的是今天这个按钮,延时获取日期弹出层包含ui-datepicker-today样式的td,然后出发下click事件即可。

 

  jqueryui datepicker点击今天按钮后设置控件值为当前日期源代码如下

<p>Date: <input type="text" id="datepicker"></p>
<script>
    $(function () {
        var picker = $("#datepicker").datepicker({
            showButtonPanel: true, currentText: "今天"
        }).datepicker('widget');//获取日期选择器容器
        picker.click(function (e) {//给容器添加click事件(因为没有点击过日期输入框弹出选择器,此时选择器容器是没有内容的,只能给容器添加click事件)
            var o = e.target;//事件对象中target存储的为点击的实际对象
            if ($(o).hasClass('ui-datepicker-current')) {//为当前这个按钮
                setTimeout(function () {//延时执行代码,当天td包含ui-datepicker-today样式,所以获取td触发下click事件
                    picker.find('td.ui-datepicker-today').trigger('click');
                }, 10);
            }
        });
    });
</script>

示例在jquery-ui-1.8.16,jquery-ui-1.10.3,jquery-ui-1.10.4下测试成功,其他版本大同小异,如果没效果自己查看DOM结构修改下相关样式。

加支付宝好友偷能量挖...


原创文章,转载请注明出处:jqueryui datepicker点击今天按钮如何设置控件值

评论(0)Web开发网
阅读(987)喜欢(0)JavaScript/Ajax开发技巧