私は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">
JQuery UIのdatepickerはdatetimepicker()で初期化されていないことに注意してください。プラグイン/アドオンは http://trentrichardson.com/examples/timepicker/ にあります。
ただし、jquery-uiだけでは、$("#example").datepicker()
として実際に初期化されます。 jQueryのデモサイトを参照してください: http://jqueryui.com/demos/datepicker/
$(document).ready(function(){
$("#example1").datepicker();
});
上記のリンクでdatetimepickerを使用するには、スクリプトパスがプラグインに対して正しいことを確認する必要があります。
bootstrap datetimepicker拡張機能。
どういうわけか、このリンクは私の問題を解決しました... tho ..
<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およびJquery 1.11.を使用しています
スクリプトの順序がすべてです。それらを並べ替えて、jquery.datetimepicker.jsをすべてのスクリプトの最後に配置してください!
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>
$(document).ready(function(){
$("#example1").datetimepicker({
allowMultidate: true,
multidateSeparator: ','
});
});