如何正确实现jQuery日期选择器和jQuery时间选择器

Question

我正在尝试在我的应用程序中安装日期选择器UI，以及它的很酷的插件Timepicker http://trentrichardson.com/examples/timepicker/#basic_examples

我在控制台中不断收到这个错误

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

我正在尝试使用示例#3，它是一个日期选择器加上一个滑块（时间格式）。

$('#basic_example_3').datetimepicker({
    timeFormat: "hh:mm tt"
});

这是我头部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>

我在我的日历弹出窗口中根本看不到滑块。我只看到一个带有时间的下拉菜单！ 有人能帮我解决这个问题吗？我认为如果我能修复这个错误，就可以解决问题了。

谢谢

- Jaylen

Answer 1

关于示例页面的来源，我建议尝试以下设置：

<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>

编辑： 为您创建了一个fiddle： http://jsfiddle.net/sNa8d/

（说明：此内容是关于代码分享平台的链接，建议在翻译时保留原始链接）

- optimisticupdate

---

谢谢。我只需要包含jquery-ui.min.js文件。我不知道它是干什么的，但一旦我包含了它，它就起作用了。感谢您的帮助。 - Jaylen

你所需要的核心滑块函数已经包含在jquery-ui.min.js中了 :) - optimisticupdate

我该如何仅选择时间选择器？ - Anant Gupta

Answer 2

如果您想使用datepicker + timepicker，并且只有一个输入框来提交它们，您可以在提交函数中将datepicker和timepicker组合在一起，如下所示：

Jquery

$("form").submit(function () {

     var matchStr = $('#matchStartDate').val() + ' ' +$('#matchStartTime').val();
     $('#MatchStartTime').val(matchStr);

     return true;
  });

HTML

<input type="text" class="datepicker" id="matchStartDate"/>
<input type="text" class="timepicker" id="matchStartTime">

用于MVC中的发布

 @Html.HiddenFor(m => m.MatchStartTime)

- user2349591