如何在第一个onclick事件上运行日期选择器？

我正在使用jqueryui的这个日期选择器 。
如果你查看那个页面，那么你会发现他们刚刚用这样的函数编写：

$(function() { $("#datepicker").datepicker(); });  

但我想在一个文本框点击事件上打开我的日期选择器。
所以我写了这个：

 $("#datepicker").datepicker(); 

在我调用文本框onclick事件的一个函数中。
但在这方面存在一个问题。

我第二次点击文本框时才收到日期选择器。
如果我在页面加载后第一次点击，那么日期选择器将不会出现，但是当我第二次点击时，日期选择器即将到来。

为什么？ 我可以在第一次点击时这样做吗？

是的我知道如果我把第一个代码放在我的函数中我已经完全发生了这个问题。

编辑：
现在我将向你们所有人解释我到底在做什么。

我的要求是这样的：

1）当我第一次选择日期时。 在今天的日期之前的日期应该在日历中禁用。
2）现在，当我在日历中第二次选择日期时，日期应该在上一个日期之后的一天开始。

我这样写的……

 $(function() { $('#from').datepicker({ defaultDate: "+5d", changeMonth: true, numberOfMonths:1 , minDate:"+0d", dateFormat: 'DD, MM d, yy', onSelect: function(selectedDate) { var option = this.id == "from" ? "minDate" : "maxDate"; var instance = $(this).data("datepicker"); var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings); dates.not(this).datepicker("option", option, date); } }); }); 

这完全适用于一个要求，
但对于第二个要求，我需要首先检查是否有任何文本框值。 如果有的话
它应该选择直接+1到该日期，并应禁用以前的日期。

这该怎么做？

Answer 1

它在第一次点击时没有显示的原因是因为你第一次点击它的那一刻，它没有被注册为日期选择器。 因此它没有onclick事件告诉它当你点击它时它应该显示任何日期选择器。

但是，在第二次单击时，您在第一次单击期间将其设置为日期选择器（现在它有一个onclick事件，其中将显示日期选择器）。 触发日期选择器的onclick事件，显示选择器。

正如其他答案所述，这不是推荐的做法。 但是如果你真的想在onc​​lick而不是onload上绑定它，你可以通过第一次点击显示选择器

 $(function() { $("#datepicker").click(function() { $(this).datepicker().datepicker( "show" ) }); }); 

这会将元素注册为datepicker并显示然后同时显示它。

Answer 2

确保在加载页面时调用datepicker，而不是onclick事件。

 $(document).ready(function() { $("#datepicker").datepicker(); }); 

Answer 3

如果有人想要在glyphicon图标和输入字段中显示日期选择器，我做了以下内容：

HTML部分：

 
 Fecha:* 
     

javascript部分：

 $(function() { $("#fecha").datepicker(); });//this enable the call to datepicker when click on input field $(function() { $("#datepicker1").click(function() { $('#fecha').datepicker().datepicker( "show" ) }); });//this one enables the onclick event on the glyphicon 

Answer 4

我想你误解了以下含义：

 $(function() { $("#datepicker").datepicker(); }); 

这与：

 $(document).ready(function() { $("#datepicker").datepicker(); }); 

和

 jquery(document).ready(function() { $("#datepicker").datepicker(); }); 

通过附上$("#datepicker").datepicker(); 您只需告诉浏览器将.datepicker()事件添加到文档就绪事件期间#datapicker ID指示的日期字段中（当文档加载并准备好处理时）。

通过NOT封闭它，你不会添加事件处理程序，直到文档准备好，javascript加载期间（或它被调用），或函数调用，如果你把它包含在那里。

请记住，如果你这样做：

 function mystuff() { $("#datepicker").datepicker(); }; mystuff(); 

你将在该函数运行时添加处理程序，如果再次调用它可能会导致问题：

  mystuff(); 

Answer 5

我从@Simen Echholt那里用过这样的回答

Answer 6

我在js函数中调用它，它工作。 请参阅代码段：

步骤1：在文件中： timepicker.jsp

第2步：在文件timepicker.js中

 function dcmaTimePicker( id, durationId) { var d = document.getElementById(durationId); if(!d.value) { d.value = 15; } jQuery('input#'+id).timepicker({ 'step': d.value }).timepicker('show'); } 

第3步：关键是：调用.timepicker（’show’） ，在第一时间显示时间戳。

Answer 7

在div onclick =“removeFocus（）”上添加一个函数并添加焦点removel脚本。