如何通过双击关闭DateTimePicker [英] How to close DateTimePicker with a double click

问题描述

我使用的是jQuery DateTimePicker插件（由： Trent Richardson ），它只会在您选择日期后关闭时间。然而，一些用户不关心时间，他们希望日历只在选择日期后关闭。

我设法在选择日期后关闭日历，但我需要实现双击而不是单击。我怎么做？
这是我的代码：

  $（jqCompletedEndID）.datetimepicker（{
 ampm：true，
 onSelect：function（）{
 $（this）.datepicker（hide）; $（this）.blur（）; 
} 
} 
  

我知道Javascript中有一个dblclick事件，但不知道如何应用它。 / p>

谢谢！

解决方案

/要求。我尝试了一些非常类似于Alex的解决方案，但它不工作，因为datetimepicker似乎擦除所有的样式和事件绑定，当选择一天（我认为它正在重建，但没有检查），使它不可能dblclick事件触发。

我想出了一个不漂亮，但工作的解决方案。您可以使用datetimepicker的onSelect事件来绑定一些处理程序，如下所示：

（假设._ $ input是正在使用的输入控件的jQuery引用） / p>

  this ._ $ input.datetimepicker（{
 ... 
 onSelect：function b $ b var self = this; 
 setTimeout（
 function（）{
 $（'。ui-datepicker-current-day'）。bind（'click'，function self ._ $ input.datepicker（'hide'）;}）; 
 $（'。ui-datepicker-current-day'）。bind（'dblclick'，function（）{self。 datepicker（'hide'）;}）; 
}，
 0 
）; 
} 
   
 
你可能想知道为什么我绑定双击和双击，特别是根据我的主张上面的双击不会工作。似乎在Chrome，FireFox，Safari，和Opera的事件将触发点击事件，但在IE它将触发dblclick事件。此外，如果你想知道setTimeout，它是必需的，因为弹出窗口不会被构造，直到方法之后
 
 
 
您毫不怀疑，我的解决方案还会在当前选择的日期关闭选择器被点击，无论它是双击的一部分。这是有意的在我的情况下（我也触发相同的逻辑在beforeShow事件连接处理程序，所以点击当前选择的日期将总是关闭选择器）。在你的情况下，如果你想要它的双重点击严格工作，我可以推荐是你跟踪点击之间的时间，并确保他们到达一定的阈值。
 
I am using a jQuery DateTimePicker addon (By: Trent Richardson) and it will only close after you select the date AND the time. However some users don't care about the time and they want the Calendar to close after they choose the date only. 

I managed to close the Calendar after picking the Date only but I need to implement a double click and not a single click. How do I do that?
Here is my code:
$(jqCompletedEndID).datetimepicker({  
    ampm: true, 
    onSelect: function(){
       $(this).datepicker("hide"); $(this).blur();
    }
});
I know there is a dblclick event in Javascript but not sure how to apply it in this context.

Thank you!
解决方案
I have run into the exact same problem / requirement. I tried something very similar to Alex's solution, but it doesn't work because the datetimepicker seems to wipe all styles and event bindings when a day is selected (I assume it's being reconstructed, but haven't checked), making it impossible for the dblclick event to fire.

I've come up with a solution which isn't pretty but does work. You can use the datetimepicker's onSelect event to bind a couple of handlers as follows:

(assuming this._$input is a jQuery reference to the input control being used)
this._$input.datetimepicker({
...
onSelect: function() {
    var self = this;
    setTimeout(
            function () {
                $('.ui-datepicker-current-day').bind('click', function () { self._$input.datepicker('hide'); });
                $('.ui-datepicker-current-day').bind('dblclick', function () { self._$input.datepicker('hide'); });
            },
            0
        );
}
You're probably wondering why I bind both click and double click, particularly in light of my claim above that double click won't work. It seems that in Chrome, FireFox, Safari, and Opera the event will trigger the "click" event, but in IE it will trigger the "dblclick" event. Also, if you're wondering about the setTimeout, it's required because the popup won't be constructed until after the method is finished, so those selectors won't return anything if executed without it.

You've no doubt noticed that my solution will also close the picker when the currently-selected date is clicked whether or not it's part of a double-click. This is intentional in my case (and I also trigger the same logic in the beforeShow event to wire the handler so clicking on the currently-selected date will always close the picker). In your case, if you want it to work strictly with double clicks, all I can recommend is that you track the time between clicks and make sure they arrive within some threshold.

                        
这篇关于如何通过双击关闭DateTimePicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！