jQuery 如何在第一个 onclick 事件上运行日期选择器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2859453/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to run date picker on the first onclick event?
提问by Nitz
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:
我正在使用jqueryui 的这个日期选择器。
如果您查看该页面，您会发现他们刚刚编写了这样的一个函数：
$(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.
在我调用文本框 onclick 事件的一个函数中。
但是在这有一个问题来了。
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....
编辑：
现在我将向你们所有人解释我到底在做什么。
我的要求是这样的：
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);
}
});
});
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.
这对一个要求非常有效，
但对于第二个要求，我需要先检查是否有任何文本框值。如果有，那么
它应该选择直接+1到那个日期，并且应该禁用以前的日期。
How to do this?
这该怎么做？
回答by Simen Echholt
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.
它没有在第一次点击时显示的原因是因为您第一次点击它的那一刻，它没有注册为日期选择器。因此它没有 onclick 事件告诉它当你点击它时它应该显示任何日期选择器。
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.
但是，在第二次单击时，您已在第一次单击期间将其设置为日期选择器（并且它现在有一个将显示日期选择器的 onclick 事件）。日期选择器的 onclick 事件触发，显示选择器。
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
正如其他答案中提到的，这不是推荐的做法。但是如果你真的想绑定它 onclick 而不是 onload，你可以在第一次点击时显示选择器
$(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.
这会将元素注册为日期选择器并同时显示它。
回答by baloo
Make sure you're calling the datepicker upon loading the page, and not with the onclick event.
确保在加载页面时调用日期选择器，而不是使用 onclick 事件。
$(document).ready(function() {
$("#datepicker").datepicker();
});
回答by Ricardo Rivera Nieves
If by any chance anyone want to display the datepicker in a glyphicon icon and on the input field I made the following:
如果有人想在字形图标和输入字段中显示日期选择器，我做了以下内容：
html part:
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 part:
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
回答by Sunny
Add a function on div onclick="removeFocus()" and add focus removel script.
在 div onclick="removeFocus()" 上添加一个函数并添加焦点删除脚本。
<script>
function removeFocus() {
$('input').blur();
}
</script>
回答by Mark Schultheiss
I think you misunderstand the meaning of:
我想你误解了以下含义：
$(function() {
$("#datepicker").datepicker();
});
which is the same as:
这与：
$(document).ready(function() {
$("#datepicker").datepicker();
});
and
和
jquery(document).ready(function() {
$("#datepicker").datepicker();
});
By enclosing the $("#datepicker").datepicker();you simply tell the browser to add the .datepicker()event to the date field indicated by the #datapickerID during the document ready event (when the document is loaded, and ready for processing).
通过将 括起来，$("#datepicker").datepicker();您只需告诉浏览器在文档就绪事件期间（加载文档并准备好处理时）将.datepicker()事件添加到由#datapickerID指示的日期字段。
By NOT enclosing it, you would NOT add the event handler until after the document is ready, during the javascript loading (or when it gets called), or the function call if you inclosed it in there.
通过不封闭它，您不会在文档准备好之后，在 javascript 加载期间（或在它被调用时）或函数调用（如果将其封闭在其中）之前添加事件处理程序。
Keep in mind that if you do:
请记住，如果您这样做：
function mystuff()
{
$("#datepicker").datepicker();
};
mystuff();
you will get the handler added when that function runs which may cause issues if you then call it again:
您将在该函数运行时添加处理程序，如果您再次调用它可能会导致问题：
mystuff();
回答by khaled_webdev
i have used like this from @Simen Echholt answer
我从@Simen Echholt 的回答中这样使用过
<input onclick="$(this).datepicker().datepicker('show')" class="validate[required,custom[date]] text-input" ...
回答by ArunDhwaj IIITH
I'd called it in the js function, and it working. See the code snippet:
我在 js 函数中调用了它，它工作正常。查看代码片段：
Step-1:In the file: timepicker.jsp
步骤 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');">
Step-2:In the file timepicker.js
步骤 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');
}
Step-3: The crux is: calling the .timepicker('show'), showing the timepicker at first time itself.
第 3 步：关键是：调用.timepicker('show')，第一次显示时间选择器本身。
