如何正确实现 jQuery 日期选择器和 jQuery 时间选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15578163/
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 correctly implement jQuery datepicker and jQuery time picker
提问by Jaylen
I am trying to install datepicker UI on my application along with its cool addon Timepicker http://trentrichardson.com/examples/timepicker/#basic_examples
我正在尝试在我的应用程序上安装 datepicker UI 及其很酷的插件 Timepicker http://trentrichardson.com/examples/timepicker/#basic_examples
I keep getting this error in the console
我一直在控制台中收到此错误
Uncaught TypeError: undefined is not a function jquery.ui.widget.js:71
$.widget jquery.ui.widget.js:71
(anonymous function) jquery.ui.slider.js:22
(anonymous function) jquery.ui.slider.js:672
I am trying to use example #3 which is a datepicker plus a slider (time format)
我正在尝试使用示例 #3，它是一个日期选择器和一个滑块（时间格式）
$('#basic_example_3').datetimepicker({
timeFormat: "hh:mm tt"
});
Here is what I my head html code
这是我的头部 html 代码
<link rel="stylesheet" href="css/jquery/jquery-ui.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.slider.js"></script>
<script src="js/jquery.ui.datepicker.js"></script>
<script src="js/jquery-ui-timepicker-addon.js"></script>
I don't see a slider at all in my calender pop up. I see a drop down menu with time! Can some one help me with this please? I think if I can fix that error it will solve the problem.
我在日历弹出窗口中根本没有看到滑块。我看到一个下拉菜单随着时间的推移！有人可以帮我解决这个问题吗？我想如果我能修复那个错误，它就会解决问题。
Thanks
谢谢
回答by hyde
Regarding the source of the example page I would suggest trying this setup:
关于示例页面的来源，我建议尝试此设置：
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="jquery-ui-sliderAccess.js"></script>
Edit: Created a fiddle for you: http://jsfiddle.net/sNa8d/
编辑：为您创建了一个小提琴：http: //jsfiddle.net/sNa8d/
回答by Jaylen
if you want to use datepicker+ timepickerand you have only one input to post them you can combine datepickerand timepickeron submit function like below:
如果你想使用datepicker+timepicker并且你只有一个输入来发布它们，你可以组合datepicker和timepicker提交功能，如下所示：
Jquery
查询
$("form").submit(function () {
var matchStr = $('#matchStartDate').val() + ' ' +$('#matchStartTime').val();
$('#MatchStartTime').val(matchStr);
return true;
});
HTML
HTML
<input type="text" class="datepicker" id="matchStartDate"/>
<input type="text" class="timepicker" id="matchStartTime">
For posting with MVC
用 MVC 发布
@Html.HiddenFor(m => m.MatchStartTime)
