jQuery UI Datepicker onClose：区分日期点击和文档点击

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

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

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

相同的日历有两种使用方式：

• 有时候用户可以选择一天（点击一天 – > myFunction（）必须调用）
• 有时用户必须选择一个月（选择月份 – >点击’确定’按钮 – >必须调用myFunction（）

我尝试使用’onSelect’：它仅在用户点击一天时有效，但当日历为“选择月份模式”时未调用myFunction

谢谢。

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

  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) { ... }, ... } 

Answer 1

这个怎么样

 $(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的所有事件中轻松设置:)

更新代码：

这里使用略有不同的方法 –

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