jQuery Datepicker 和 Timepicker 用于相同的输入字段以一个接一个地弹出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1028409/
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
jQuery Datepicker and Timepicker for same input field to popup one after another
提问by Phill Pafford
I have a Datepicker and a Timepicker in 2 separate input fields but I need to combine the 2 fields inputs into one for a database call. Wanted to know if I could only use 1 input field for both controls?
我在 2 个单独的输入字段中有一个 Datepicker 和一个 Timepicker，但我需要将 2 个字段输入合并为一个以进行数据库调用。想知道我是否只能为两个控件使用 1 个输入字段？
first call the datepicker and the user would click the date wanted and it would enter the value, then the timepicker would popup and append the date the user selected in the first action.
首先调用日期选择器，用户将单击想要的日期并输入值，然后时间选择器将弹出并附加用户在第一个操作中选择的日期。
I'm using the jQuery UI Datepickerand Timepickrplug-ins
我正在使用jQuery UI Datepicker和Timepickr插件
So I have something like this
所以我有这样的事情
<input class="datepicker">2009-06-22</input>
<input class="timepicker">12:00:00</input>
But would like something like this
但想要这样的东西
<input class="datetimepicker">2009-06-22 12:00:00</input>
<script type="text/javascript">
// Date and Time picker same input field
$("#datepicker").datepicker( {
dateFormat: 'yy-mm-dd',
onClose: function(dateText, inst) {
var tempDate = $("#datepicker").val(dateText);
$("#datepicker").timepickr({
onClose: function(timeText, inst) {
var tempTime = $("#datepicker").val(dateText);
alert("Temp Time: '" + tempTime.val() + "'");
$("#datepicker").val(tempDate.val() + ' ' + tempTime.val());
}
});
}
});
</script>
回答by Andrew M. Andrews III
I'd like to recommend Any+Time(TM), in which you can combine the date/time in a single field with a single, easy-to-use (and quick!) date/time combo picker.
我想推荐Any+Time(TM)，您可以在其中将单个字段中的日期/时间与单个易于使用（且快速！）的日期/时间组合选择器组合在一起。
回答by Sampson
You could bind an event to the onClose() event of the datepicker. Have it open up your time picker. Let the datepicker write the base value of the input, and have the timepicker append it's value following a space to the same input.
您可以将事件绑定到日期选择器的 onClose() 事件。让它打开你的时间选择器。让日期选择器写入输入的基值，并让时间选择器将它的值附加到同一输入的空格后面。
- Bind date-picker to input.
- Attach method to open timepicker to .onClose() event of date-picker.
- Append time-picker value (with a preceding space) to input value.
- 将日期选择器绑定到输入。
- 将打开时间选择器的方法附加到日期选择器的 .onClose() 事件。
- 将时间选择器值（前面有空格）附加到输入值。
Updated: The follow is an updated resulting from an updated question.
更新：以下是更新问题的更新。
The documentation gives a brief example on how to bind an event/action to the closing of the datepicker:
该文档给出了一个关于如何将事件/动作绑定到日期选择器的关闭的简短示例：
$('.selector').datepicker({
onClose: function(dateText, inst) { ... }
});
In this example, you could use your function following "onClode: " to write the value to the input, and popup the timepicker.
在此示例中，您可以使用“onClode:”后面的函数将值写入输入，并弹出时间选择器。
$(".selector").datepicker({
onClose: function(dateText, inst) {
$(".selector").val(dateText);
// Raise Timepickr
}
});
回答by Bat_Programmer
Not jQuery, but it works well for a calendar with time: JavaScript Date Time Picker.
不是 jQuery，但它适用于带时间的日历：JavaScript Date Time Picker。
Just bind the click event to pop it up:
只需绑定点击事件即可弹出：
$("#date").click(function() {
NewCssCal($(this).attr('id'), 'mmddyyyy', 'dropdown', true, 12);
});
Personally I find this much easier to follow. But obviously you have so many options with multiple jquery plugins available to do your job.
我个人觉得这更容易遵循。但很明显，您有很多选择，可以使用多个 jquery 插件来完成您的工作。
回答by sakhunzai
Please checkout the link.
请检查链接。
I have updated some layout issue and added second slider, which will be active if {showTime:true, time24h:true}
我更新了一些布局问题并添加了第二个滑块，如果 {showTime:true, time24h:true}
You can find the original one at Google Code.
您可以在Google Code 上找到原始版本。
回答by dhaval
You can try combining the inputs from both controls into one like
您可以尝试将来自两个控件的输入合并为一个，例如
$("#datetime").focus(function() {
var mydate = $("#date").val();
var mytime = $("#time").val();
if(mydate && mytime && !this.value) {
this.value = mydate + " " + mytime;
}
});
回答by AlexC
Here's an alternative:
这是一个替代方案：
http://www.r-ip.ru/dev/datetimepicker/index.html
http://www.r-ip.ru/dev/datetimepicker/index.html
$('#datetimepicker').datetimepicker({
dateFormat: 'yy-mm-dd',
timeFormat: ' hh:ii:ss'
});
