如何正确实现 jQuery datepicker 和 jQuery time picker答案

【问题标题】：How to correctly implement jQuery datepicker and jQuery time picker如何正确实现 jQuery datepicker 和 jQuery time picker
【发布时间】：2013-03-22 19:13:38
【问题描述】：

我正在尝试在我的应用程序上安装 datepicker 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>

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

谢谢

【问题讨论】：

标签： jquery datepicker timepicker

【解决方案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>

编辑：为你创造了一个小提琴：http://jsfiddle.net/sNa8d/

【讨论】：

谢谢。我只需要包含 jquery-ui.min.js 文件。我不知道我的 oncw 是什么，我把它包括在内它有效。感谢您的帮助
你正在寻找的核心滑块功能包含在 jquery-ui.min.js :)
如何只选择时间选择器？

【解决方案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)

【讨论】：