引导日期时间选择器 [英] Bootstrap date time picker
本文介绍了引导日期时间选择器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图按照这里的说明实现日期时间选择器 https：// eonasdan .github.io / bootstrap-datetimepicker /＃minimum-setup ，我已经下载了 js 文件 css 文件到目录 js 和 css 。但点击图标时日历不会弹出。
$（function （）{$（'＃datetimepicker1'）。datetimepicker（）;}）;
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>< script src =https ：< / script>< / script& 3.3.7 / js / bootstrap.min.js>< / script>< link rel =stylesheettype =text / csshref =css / bootstrap-datetimepicker.css>< link rel =stylesheettype =text / csshref =css / bootstrap-datetimepicker.min.css>< link rel =stylesheettype =text / csshref =css / bootstrap-datetimepicker -standalone.css>< script type =te xt / javascriptsrc =js / bootstrap-datetimepicker.min.js>< / script>< / head>< body> < div class =container> < div class =row> < div class ='col-sm-6'> < div class =form-group> < div class ='input-group date'id ='datetimepicker1'> < input type ='text'class =form-control/> < span class =input-group-addon> < span class =glyphicon glyphicon-calendar>< / span> < /跨度> < / DIV> < / DIV> < / DIV> < / DIV> < / div>
解决方案
脚本必须按顺序导入：
- jQuery和Moment.js
- Bootstrap js文件
- 引导日期选择器js文件
Bootstrap-datetimepicker需要首先加载Moment.js。这里是工作片段。
$（function（）{$（'＃datetimepicker1'）。datetimepicker （）;}）;
< script src = https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js\"></script><script src =https://cdnjs.cloudflare.com/ajax /libs/moment.js/2.15.1/moment.min.js\"></script><script src =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3。 7 / js / bootstrap.min.js>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker .min.js>< / script>< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min .css>< link rel =stylesheethref =https://cdnjs.cloudflare.com/ajax/l ibs / bootstrap-datetimepicker / 4.7.14 / css / bootstrap-datetimepicker.min.css>< div class =container> < div class =row> < div class ='col-sm-6'> < div class =form-group> < div class ='input-group date'id ='datetimepicker1'> < input type ='text'class =form-control/> < span class =input-group-addon> < span class =glyphicon glyphicon-calendar>< / span> < /跨度> < / DIV> < / DIV> < / DIV> < / div>< / div>
I am trying to implement the date time picker as explained here https://eonasdan.github.io/bootstrap-datetimepicker/#minimum-setup, I have downloaded the js file css file to the directory js and css. But the calendar is not popup up when click on icon.
$(function() {
$('#datetimepicker1').datetimepicker();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker-standalone.css">
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
解决方案
scripts must be imported in order:
- jQuery and Moment.js
- Bootstrap js file
- Bootstrap datepicker js file
Bootstrap-datetimepicker requires Moment.js to be loaded first. Here is working snippet.
$(function() {
$('#datetimepicker1').datetimepicker();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
这篇关于引导日期时间选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
