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

标签 jquery jquery-ui datepicker

我正在使用这个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到该日期,并且之前的日期应该被禁用。

如何做到这一点?

最佳答案

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

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

正如其他答案中提到的,这不是推荐的做法。但是,如果您确实想将其绑定(bind)到 onclick 而不是 onload,则可以通过执行以下操作在第一次单击时显示选择器

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

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

关于jquery - 如何在第一个 onclick 事件上运行日期选择器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2859453/

相关文章:

javascript - angularjs 的 Bootstrap datepicker 指令

javascript - 有 Metro 风格的日期选择器吗?

jquery - 在 jQuery 日期选择器中手动输入日期不会更新小部件

如果输入框未填充,Javascript 隐藏 HTML 文本

javascript - 使用 Jquery 解析 XML 数组

javascript - 如何根据 slider 值动态设置 jquerymobile slider 的步长?

javascript - 避免在选择日期后重新打开日期选择器

jQuery - 有没有办法在加载网页后将屏幕锁定到当前方向?

javascript - 在静态 json 文件上的 Node js 上使用 getJSON 时不支持获取协议(protocol)

jquery - 使用 jQuery 将 <object> 的所有实例更改为 &lt;iframe&gt; 以支持 IE