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

时间:2013-03-22 19:13:39

标签: jquery datepicker timepicker

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

我的日历弹出窗口中根本没有看到滑块。随着时间的推移,我看到一个下拉菜单! 有人可以帮我这个吗?我想如果我能解决这个错误就能解决问题。

由于

2 个答案:

答案 0 :(得分:5)

关于示例页面的来源,我建议尝试这个设置:

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

答案 1 :(得分:0)

如果您想使用datepicker + timepicker并且只有一个输入来发布它们,您可以将datepickertimepicker组合在提交函数上,如下所示:

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)