Bootstrap3 datetimepicker控制元件的使用
阿新 • • 發佈:2019-01-22
Bootstrap3 日期+時間選擇控制元件
1.支援日期選擇,格式設定
2.支援時間選擇
3.支援時間段選擇控制
4.支援中文
使用方法,引用的檔案:
<script src="../Js/jquery-1.11.3.min.js"></script> <link href="../Js/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet" /> <script src="../Js/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script> <link href="../Js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" /> <script src="../Js/bootstrap-datetimepicker/js/moment-with-locales.min.js"></script> <script src="../Js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
例項1:,簡單配置:
<div class="row"> <div class='col-sm-6'> <div class="form-group"> <label>選擇日期:</label> <!--指定 date標記--> <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 class='col-sm-6'> <div class="form-group"> <label>選擇日期+時間:</label> <!--指定 date標記--> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div>
$(function () {
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
$('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD hh:mm',
locale: moment.locale('zh-cn')
});
});
例項2,選擇時間段:
<div class="row"> <div class='col-sm-6'> <div class="form-group"> <label>選擇開始時間:</label> <!--指定 date標記--> <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 class='col-sm-6'> <div class="form-group"> <label>選擇結束時間:</label> <!--指定 date標記--> <div class='input-group date' id='datetimepicker2'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> </div>
$(function () {
var picker1 = $('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn'),
//minDate: '2016-7-1'
});
var picker2 = $('#datetimepicker2').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
//動態設定最小值
picker1.on('dp.change', function (e) {
picker2.data('DateTimePicker').minDate(e.date);
});
//動態設定最大值
picker2.on('dp.change', function (e) {
picker1.data('DateTimePicker').maxDate(e.date);
});
});
例項3,使用CDN的檔案連結示例:
js引用:
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/moment.js/2.18.1/moment-with-locales.min.js"></script>
<link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
Html程式碼:<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="">選擇日期:</label>
<div class="input-group date" id='date1'>
<input type="text" class="form-control">
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
</div>
</div>
js程式碼:
$(function () {
$('#date1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn')
});
});
例項4,在初始化的時候,使用defaultDate指定預設時間:
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-DD',
locale: moment.locale('zh-cn'),
defaultDate: "1990-1-1"
});
更多: