jQuery UI 日期选择器 onClose:区分日期单击和文档单击

jQuery UI Datepicker onClose: distinguish between date click and document click

本文关键字：单击 日期 文档 UI 选择器 onClose jQuery      更新时间：2023-09-26

我有一个带有onClose函数的日期选择器，当用户选择日期（正确）时调用该函数，但是当显示日历但用户单击文档中的任意位置（错误）时也会调用该函数。

在onClick中，有没有办法区分用户对日期的点击（然后日历关闭）和用户在文档中的点击？

$( "#datePicker" ).datepicker({
    ...
    onClose: myFunction(),
    ...
});

同一日历有两种使用方式：

  • 有时用户可以选择一个日期（点击一天 ->必须调用 myFunction（）
  • 有时用户必须选择一个月份（选择月份 ->单击"确定"按钮-> 必须调用 myFunction（）

我尝试使用"onSelect"：它仅在用户单击某一天时才有效，但是当日历为"选择月份模式"时不会调用myFunction。

谢谢。

这是我使用 Kumar 解决方案尝试@Prashant代码：

  my={};
(function(){
    my.customCalendar={     
        closedBySelect:false,
        init: function()
        {
            $( "#datePicker" ).datepicker({
                ...
                onSelect: function () {
                    my.customCalendar.myFunction();
                    this.closedBySelect = true;
                },              
                onClose: function (){
                    console.log('fired on close');
                    if (this.closedBySelect) {
                        console.log('logic when closed on select');
                        this.myFunction();
                    } else {
                     console.log('logic when closed on document click');
                    }
                    my.customCalendar.closedBySelect = false;
                },
                ...
                showButtonPanel: true
            });
            ...
            myFunction:function (dateText, inst)
            {
                ...
            },
            ...
        }
这个

怎么样

$(function () {
    $('#datepicker').datepicker({
        closedBySelect:false,
        onSelect: function (date, options) {
            alert('fired when selected');
            options.settings.closedBySelect = true;
        },
        onClose: function (date, options) {
            alert('fired on close');
            if (options.settings.closedBySelect) {
                console.log('logic when closed on select');
            } else {
             console.log('logic when closed on document click');
            }
            options.settings.closedBySelect = false;
        }
    });
});

closedBySelect 不在 API 中，而是添加的自定义属性，我们可以轻松地在日期选择器的所有事件中设置:)

更新代码 ：

这里使用了略有不同的方法 -

$(function () { 
    var datePicker = $('#datepicker');
    datePicker.data('closedOn','document').datepicker({
        showButtonPanel:true,       
        onClose: function (date, options) {          
            alert($(this).data('closedOn'));  
            //  your logic goes here ...
            $(this).data('closedOn','document');
        }
    }).datepicker('widget').on('mousedown',function(event){
        var $this = $(this);
        var target = $(event.target);      
        if(target.hasClass('ui-datepicker-close'))
        {
            console.log('closed from button panel');
           datePicker.data('closedOn','byButtonPanel');
        }
        if( typeof target.parent().data('month') != 'undefined')
        {
            console.log('closed by selecting date');
            datePicker.data('closedOn','byDateSelect');
        }      
    });    
});
相关文章：