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事件，显示选择器。

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

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

这会将元素注册为日期选择器并显示，然后同时显示它。

Answer 2

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

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

Answer 3

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

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指示的日期字段中（文档加载时，并准备好处理）。

通过NOT封闭它，你不会在文档准备好之后，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函数中调用它，它工作正常。请参阅代码段：

第1步：在文件中： 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');">

步骤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（）”上添加一个函数并添加焦点删除脚本。

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

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

7 个答案: