jQuery UI Datepicker onClose：区分日期单击和文档单击 [英] jQuery UI Datepicker onClose: distinguish between date click and document click

问题描述

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

I have a datepicker with an onClose function that is called when user select a date (correct), but also when the calendar is shown but user clicks anywhere in the document (wrong).

在onClick内，是否可以区分用户单击日期（然后关闭日历）和文档中用户单击？

Inside onClick, is there a way to distinguish between user's click on a date (then calendar is closed) and user's click in the document?

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

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

The same calendar is used in 2 ways:

• 有时用户可以选择一天（单击一天->必须调用myFunction（））


• 有时用户必须选择一个月（选择月份） ->单击确定按钮
  ->必须调用myFunction（））

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

I tried use 'onSelect': it works only when user clicks on a day, but myFunction isn't called when calendar is "select month mode"

谢谢。

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

This is the code I tried with @Prashant Kumar solution:

  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中，而是添加了一个自定义属性，我们可以轻松地在所有属性中进行设置datepicker事件：）

closedBySelect is not in the API rather it is a custom attribute added which we can easily be set in all events of datepicker :)

更新代码：

此处使用略有不同的方法-

Used slightly different approach here -

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

这篇关于jQuery UI Datepicker onClose：区分日期单击和文档单击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！