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

Question

我正在使用这个date picker from jqueryui。
如果你看那个页面，你会发现他们刚刚写了一个这样的函数：

    $(function() {
        $("#datepicker").datepicker();
    });
    </script>

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

$("#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 事件触发，显示选择器。

正如其他答案中提到的，这不是推荐的方法。但是如果你真的想在点击时绑定它而不是在加载时，你可以在第一次点击时显示选择器

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

这会将元素注册为日期选择器并同时显示和显示。

Answer 2

确保在加载页面时调用日期选择器，而不是使用 onclick 事件。

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

Answer 3

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

html部分：

<div class="form-group">
   <label>Fecha:<font color="#FF0000">*</font></label>
 <div class='input-group date' id='datepicker1'>
   <input id="fecha" name="fecha" type="text" class="form-control" />
    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

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 指示的日期字段。

通过不包含它，您不会添加事件处理程序，直到文档准备好之后，在 javascript 加载期间（或当它被调用时），或者如果您将它包含在函数调用中。

请记住，如果您这样做：

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

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

 mystuff();

Answer 5

我从@Simen Echholt 的回答中使用过这样的

<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ...

Answer 6

我在 js 函数中调用了它，它可以工作。 见代码sn -p：

第一步：在文件中：timepicker.jsp

  <input class="time ui-timepicker-input" id="dcma_day_start"  type="text" autocomplete="off" 
     placeholder="End time" onClick="dcmaTimePicker('dcma_day_start', 'dcma_durationId');">

第二步：在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');
}

Step-3：关键是：调用.timepicker('show')，第一次显示timepicker本身。

Answer 7

在 div onclick="removeFocus()" 上添加一个函数并添加焦点移除脚本。

<script>
    function removeFocus() {
        $('input').blur();
    }
</script>