代码之家 › 专栏 › 技术社区 › Nitz

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

datepicker jquery-ui jquery

Nitz · 技术社区 · 16 年前

我在用这个 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,并且应禁用以前的日期。

如何做到这一点?

7 回复 | 直到 8 年前

Simen Echholt 16 年前

它在第一次单击时不显示的原因是,第一次单击它时,它没有注册为日期选取器。因此,它没有onclick事件告诉它应该在单击时显示任何日期选择器。

但是,在第二次单击时,您已经将其设置为第一次单击期间的日期选取器(现在它有一个on click事件,将在其中显示日期选取器)。日期选取器的onclick事件激发,显示选取器。

如其他答案所述,这不是推荐的方法。但是,如果您真的想将其绑定到on click而不是onload,则可以通过执行以下操作在第一次单击时显示选择器

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

这将把元素注册为日期选择器,并同时显示它。

baloo 16 年前

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

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

Ricardo Rivera Nieves 10 年前

如果有人想在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

Mark Schultheiss 16 年前

我认为你误解了:

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

khaled_webdev 14 年前

我用过@simen echholt的回答

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

ArunDhwaj IIITH 10 年前

我在JS函数中调用了它,它工作正常。请参见代码段:

步骤1: 在文件中: 时间选择器

  <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:在文件中 时间选择器

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('显示') ,第一次显示时间选择器本身。

Sunny 8 年前

在div onclick=“removefocus()”上添加函数,然后添加focus removel脚本。

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