Bootstrap3 datetimepicker控件使用实例
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了Bootstrap3 datetimepicker控件使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Bootstrap3 日期+时间选择控件的使用方法，供大家参考，具体内容如下
1.支持日期选择，格式设定
2.支持时间选择
3.支持时间段选择控制
4.支持中文
官网地址：
git地址：
moment语言包：
datetimepicker使用配置说明：
moment时间格式化使用说明：
使用方法，引用的文件：
<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个精彩的专题：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。