jquery DatePicker完成按钮

时间:2013-03-25 16:58:48

标签: jquery jquery-ui

有没有办法处理在jquery UI DatePicker中按下“完成”按钮的事件?

我有一个日期选择器,只允许在here

中选择年份和月份

问题是使用onclose事件会阻止我清除字段(如果我单击弹出的日期选择器,那么如果我关闭当前选定的月份和年份将被放入字段中)。

我不想在日期选择器之外使用额外的“清除”按钮,所以我可以使用完成按钮。

5 个答案:

答案 0 :(得分:8)

当“完成”按钮调用_hideDatepicker函数时,您可以覆盖它:

jQuery.datepicker._hideDatepicker = function() {
  alert('hello');
};

答案 1 :(得分:7)

这是完美的解决方案:

$(function() {
    $('.monthYearPicker').datepicker({
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        dateFormat: 'MM yy'
    }).focus(function() {
        var thisCalendar = $(this);
        $('.ui-datepicker-calendar').detach();
        $('.ui-datepicker-close').click(function() {
            var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            thisCalendar.datepicker('setDate', new Date(year, month, 1));
        });
    });
});

<强> CSS:

.ui-datepicker-calendar {
    display: none;
}

HTML:

<label for="myDate">Date :</label>
<input name="myDate" class="monthYearPicker">

了解它如何在jsfiddle中发挥作用。

来源: http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

礼貌: THISTHAT结合使用这些答案来制作此解决方案。

答案 2 :(得分:6)

我在一个论坛上找到了解决方案(不记得哪里 - 对不起)。我知道它已经有一段时间了,但是对于未来的搜索:)

注意:更改需要在插件中完成。您只需搜索“onClose:”即可找到它。

onClose: function (dateText, inst) {
    function isDonePressed() {
        return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
    }
    if (isDonePressed()){
        alert('done pressed');
    }
}

答案 3 :(得分:2)

$('#start_date_download').datepicker({
    dateFormat:"yy-mm-dd",
    "autoclose": true,
    showButtonPanel: true,
    closeText: 'Clear' 
}).focus(function() {
    var thisCalendar = $(this);
    $('.ui-datepicker-close').click(function() {
        $.datepicker._clearDate($('#start_date_download'));
    });
});

答案 4 :(得分:1)

也许:

$('#myInput')
    .datepicker({
        // datepicker options
    })
    .datepicker('widget')
    .find('.ui-datepicker-close')
    .on('click', function () {
        // done button's handler here
    });