Bootstrap 日历
涉及的样式及js:(moment-with-locales.js 这个得在datatimpicker.min.js之前。可以网上百度这个文件。我没找到这个cdn)
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="static/js/moment-with-locales.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
起始结束时间:
<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>
JavaScript代码:
$(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); }); });
效果图: