日期时间选择器不是一个 jQuery 函数。

Question

我正在使用datetimepicker jquery ui，当下面的代码在HTML中运行时，datetimepicker没有显示，当我使用firebug console检查它时，显示了一个错误。

$("#example1").datetimepicker is not a function
[Break On This Error] $("#example1").datetimepicker(); 

下面是代码：

<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css">

<style>
    .ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }

    .ui-timepicker-div dl { text-align: left; }
    .ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
    .ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }          
    .ui-timepicker-div td { font-size: 90%; }           
    .ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }                   

</style>


<script type="text/javascript" src="scripts/jquery.js"></script>

<script type="text/javascript" src="scripts/jquery/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript" src="scripts/jquery/ui/jquery-ui-sliderAccess.js"></script>

<script>
    $(document).ready(function(){
        $("#example1").datetimepicker();
    });
</script>

<script>

</script>

<input type="text" id="example1" class="hasDatePicker">

- Rafee

---

你使用的是哪个版本的jQuery？另外，jquery-ui.datepicker.js文件的目的是什么？jquery-ui-1.8.16.custom.min.js应该已经包含了所有的jQuery小部件，包括日期选择器。 - Mitch A

也许这个问题/答案可以帮助你。 - Chris

@Dirk jQuery JavaScript库v1.7.1，我已经删除了除jquery-ui-1.8.16.custom.min.js之外的所有脚本，但是它仍然报错。 - Rafee

Answer 1

请注意，使用jQuery UI的日期选择器不是通过datetimepicker()初始化的，这里似乎有一个插件/附加程序：http://trentrichardson.com/examples/timepicker/。

然而，仅使用jquery-ui可以通过$("#example").datepicker()进行初始化。请参见jQuery的演示网站：http://jqueryui.com/demos/datepicker/

   $(document).ready(function(){
        $("#example1").datepicker();
    });

为了使用上面提到的datetimepicker，您需要确保插件的脚本路径是正确的。

- PriorityMark

---

我该如何使用它？它只返回一个随机字符串，据我所见与日期无关。 - Jack

Answer 2

我在使用 Bootstrap DateTimePicker 扩展时遇到了相同的问题。在 datetimepicker.js 之前引入 moment.js 是解决方案。

- Frank Eschenbacher

Answer 3

出于某种原因，这个链接解决了我的问题...虽然我不知道为什么...

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>

然后是这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

注意：我正在使用 Bootstrap 3 和 Jquery 1.11.3

- Maduro

---

我认为这应该是被接受的答案！ - Quan Truong

我认为这应该是被接受的答案！ - undefined

Answer 4

关键在于脚本的顺序。 尝试重新排序，将jquery.datetimepicker.js放在所有脚本的最后！

- dacigard

Answer 5

Place your scripts in this order:   

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

- Anup Shetty

Answer 6

 $(document).ready(function(){
    $("#example1").datetimepicker({
      allowMultidate: true,
      multidateSeparator: ','
    });
 });

- Amdad Hossain

---

欢迎来到 Stack Overflow！请尽量提供关于您解决方案的清晰描述。参见：如何撰写一个好的答案？感谢。 - 4b0