如何在第一个onclick事件上运行日期选择器？ [英] How to run date picker on the first onclick event?
问题描述
我正在使用这个 jqueryui的日期选择器。
如果你看那个页面，那么你会发现他们刚刚写了这样一个函数：
$（function（）{
$（＃datepicker）。datepicker（）;
}）;
< / script>
但是我想在一个文本框点击事件上打开我的日期选择器。
所以我写了这个：
$（＃datepicker）。
在一个函数中，我在文本框onclick事件上调用。
但是在这里有一个问题来了。
我只是在第二次点击文本框时收到日期选择器。
如果我在页面加载后第一次点击，那么日期选择器不会出现，但是一旦我点击第二次，那么日期选择器即将到来。
为什么？我可以先点击吗？
是的，我知道如果我把第一个代码放在第一个代码，但是我想要它在我的函数
编辑：
现在我将向所有的人解释我正在做什么
< br>
我的要求是这样的：
1）当我第一次选择日期时。今天日期之前的日期应在日历中禁用。
2）现在，当我在日历中第二次选择日期时，日期应该在上一个日期之后的一天开始。
我这样写了....
$（function（）{
$（'从'）。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，选择tedDate，instance.settings）;
dates.not（this）.datepicker（选项，选项，日期）;
}
}）;
}）;
这完全符合一个要求，
但是对于第二个要求，我需要先检查if有任何文本框值。如果有
，那么应该选择直接到该日期的+1，并且应该禁用以前的日期。
如何做？
第一次点击不显示的原因是因为您第一次点击它的时候，它没有注册为日期戳。因此，它没有任何告诉它，当您点击它应该显示任何日期选择器。
然而，在第二次单击时，您将其设置为日期戳首先点击（现在有一个onclick事件，其中显示日期标记）。 datepicker的onclick事件触发，显示选择器。
如其他答案所述，这不是推荐的方法。但是，如果你真的想绑定它，而不是onload，你可以通过执行
$ $ $ $ $ $ $ $ $ $ $ $ function（）{
$（＃datepicker）。click（function（）{
$（this）.datepicker（）。datepicker（show）
}）;
}）;
这将注册该元素作为一个日期戳，并显示然后同时显示。 >
I am using this date picker from jqueryui.
If you look on that page, then you will find that they have just written in one function like this:
$(function() {
$("#datepicker").datepicker();
});
</script>
But I want to open my date picker on one text box click event.
So I have written this:
$("#datepicker").datepicker();
in one function which I am calling on the textbox onclick event.
But in this there is one problem coming.
I am only getting the date picker on the second time I click on the text box.
If I click the first time after the page loads then the date picker will not come up but as soon as I click the second time then the date picker is coming.
Why? And can I do it on the first click?
Yes I know this is already happening perfectly if I put the first code but I want it in my function.
EDIT:
Now I will explain to all you guys what exactly I am doing.
My requirement is like this:
1) When I select the date the first time. Dates before today's date should be disabled in calender.
2) Now when I select the date the second time in the calender, the date should start one day after the previous date.
I have written like this....
$(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);
}
});
});
This works perfectly on one requirement,
but for the second requirement I need to check first if there is any text box value. If there is any then
it should select direct +1 to that date and previous dates should be disabled.
How to do this?
The reason it's not showing on the first click is because the instant you click it the first time, it is not registered as a datepicker. It therefore has no onclick event telling it that it should show any datepicker when you click it.
On the second click, however, you have set it as a datepicker during the first click (and it now has an onclick event where the datepicker will be shown). The datepicker's onclick event fires, showing the picker.
As mentioned in other answers, this is not the recommended way of doing it. But if you really want to bind it onclick and not onload, you can show the picker on the first click by doing
$(function() {
$("#datepicker").click(function() {
$(this).datepicker().datepicker( "show" )
});
});
This will register the element as a datepicker and show then show it at the same time.
这篇关于如何在第一个onclick事件上运行日期选择器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
