Bootstrap3 datetimepicker控件的使用
发布时间:2020-12-17 20:58:38 所属栏目:安全 来源:网络整理
导读:Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:
Bootstrap3 日期+时间选择控件 1.支持日期选择,格式设定 2.支持时间选择 3.支持时间段选择控制 4.支持中文 官网地址:http://eonasdan.github.io/bootstrap-datetimepicker/ git地址:https://github.com/Eonasdan/bootstrap-datetimepicker moment语言包:https://github.com/moment/moment datetimepicker使用配置说明:http://eonasdan.github.io/bootstrap-datetimepicker/Options/ moment时间格式化使用说明:http://momentjs.com/docs/ 使用方法,引用的文件: <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); }); }); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |