bootstrap里加入日期控件
总统来说，关键是引用js 和 css，尤其是那些cdn的公网加速后的js和css，包括jquery和datetimepicker.css,本地化时间格式的js，datetimepicker.js
一、jsp页面 引入 js
<% pageContext.setAttribute("APP_PATH", request.getContextPath()); %> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap-theme.css" rel="stylesheet"> <link href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"> <link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="https://cdn.bootcss.com/moment.js/2.24.0/moment-with-locales.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
其中带$APP_PATH的，都是之前引用的，不是必须。
二、在jsp页面，书写html的标签，我用到了4次控件。所以写了4个。
<div class="form-group"> <form id="formpicker1" action="countHitsDate" class="form-horizontal"> <label>选择开始日期：</label> <!--指定 date标记--> <div class=\'input-group date\' id=\'datetimepicker1\'> <input type=\'text\' name="begin" class="form-control" id=\'inputpicker1\' /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br/> <label>选择结束日期：</label> <!--指定 date标记--> <div class=\'input-group date\' id=\'datetimepicker2\'> <input type=\'text\' name="end" class="form-control" id="inputpicker2" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br> <button type="submit" id="countDate" class="btn btn-primary" formmethod="post" style="margin-right:15px" >统计</button> <label style="margin-right:5px;"> <input type="radio" name="coming" id="all" value="all" <c:if test="${radiopicker1==\'all\'}">checked</c:if> > 全部 </label> <label style="margin-right:5px;"> <input type="radio" name="coming" id="wx" value="wx" <c:if test="${radiopicker1==\'wx\'}">checked</c:if>> wx </label> <label> <input type="radio" name="coming" id="pc" value="pc" <c:if test="${radiopicker1==\'pc\'}">checked</c:if>> pc </label> </form> </div> <h4><span class="label label-default"><c:out value="${tipsDate }"></c:out></span></h4> <hr> <br> <div class="form-group"> <form id="formpicker1" class="form-horizontal" action="countHitsTime"> <label>选择开始日期+时间：</label> <!--指定 date标记--> <div class=\'input-group date\' id=\'datetimepicker3\'> <input type=\'text\' name="begin" class="form-control" id="inputpicker3" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br/> <label>选择结束日期+时间：</label> <!--指定 date标记--> <div class=\'input-group date\' id=\'datetimepicker4\'> <input type=\'text\' name="end" class="form-control" id="inputpicker4" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> <br> <button type="submit" id="countTime" class="btn btn-primary" formmethod="post" style="margin-right:15px" >统计</button> <label style="margin-right:5px;"> <input type="radio" name="coming" id="all" value="all" <c:if test="${radiopicker2==\'all\'}">checked</c:if>> 全部 </label> <label style="margin-right:5px;"> <input type="radio" name="coming" id="wx" value="wx" <c:if test="${radiopicker2==\'wx\'}">checked</c:if>> wx </label> <label> <input type="radio" name="coming" id="pc" value="pc" <c:if test="${radiopicker2==\'pc\'}">checked</c:if>> pc </label> </form> </div> <h4><span class="label label-default"><c:out value="${tipsTime }"></c:out></span></h4> </div> </div>
三、 书写加载脚本，我引用了4个控件，所以加载了4次。
<script type="text/javascript"> $(function(){ $(\'#datetimepicker1\').datetimepicker({ format: \'YYYY-MM-DD\', locale: moment.locale(\'zh-cn\'), }); $(\'#datetimepicker2\').datetimepicker({ format: \'YYYY-MM-DD\', locale: moment.locale(\'zh-cn\'), }); $(\'#datetimepicker3\').datetimepicker({ format: \'YYYY-MM-DD HH:mm\', locale: moment.locale(\'zh-cn\'), }); $(\'#datetimepicker4\').datetimepicker({ format: \'YYYY-MM-DD HH:mm\', locale: moment.locale(\'zh-cn\'), }); }) </script>
获取明天或者前天的时间
var myDate = new Date(); var nextDate = new Date(myDate.getTime() + 24*60*60*1000); $(\'#datetimepicker1\').datetimepicker({ format: \'YYYY-MM-DD\', locale: moment.locale(\'zh-cn\'), defaultDate:myDate, }); $(\'#datetimepicker2\').datetimepicker({ format: \'YYYY-MM-DD\', locale: moment.locale(\'zh-cn\'), defaultDate:nextDate, });
另附配置表 https://cloud.tencent.com/developer/article/1362533
$.fn.datetimepicker.defaults = { timeZone: \'\', format: false, dayViewHeaderFormat: \'MMMM YYYY\', extraFormats: false, stepping: 1, minDate: false, maxDate: false, useCurrent: true, collapse: true, locale: moment.locale(), defaultDate: false, disabledDates: false, enabledDates: false, icons: { time: \'glyphicon glyphicon-time\', date: \'glyphicon glyphicon-calendar\', up: \'glyphicon glyphicon-chevron-up\', down: \'glyphicon glyphicon-chevron-down\', previous: \'glyphicon glyphicon-chevron-left\', next: \'glyphicon glyphicon-chevron-right\', today: \'glyphicon glyphicon-screenshot\', clear: \'glyphicon glyphicon-trash\', close: \'glyphicon glyphicon-remove\' }, tooltips: { today: \'Go to today\', clear: \'Clear selection\', close: \'Close the picker\', selectMonth: \'Select Month\', prevMonth: \'Previous Month\', nextMonth: \'Next Month\', selectYear: \'Select Year\', prevYear: \'Previous Year\', nextYear: \'Next Year\', selectDecade: \'Select Decade\', prevDecade: \'Previous Decade\', nextDecade: \'Next Decade\', prevCentury: \'Previous Century\', nextCentury: \'Next Century\', pickHour: \'Pick Hour\', incrementHour: \'Increment Hour\', decrementHour: \'Decrement Hour\', pickMinute: \'Pick Minute\', incrementMinute: \'Increment Minute\', decrementMinute: \'Decrement Minute\', pickSecond: \'Pick Second\', incrementSecond: \'Increment Second\', decrementSecond: \'Decrement Second\', togglePeriod: \'Toggle Period\', selectTime: \'Select Time\' }, useStrict: false, sideBySide: false, daysOfWeekDisabled: false, calendarWeeks: false, viewMode: \'days\', toolbarPlacement: \'default\', showTodayButton: false, showClear: false, showClose: false, widgetPositioning: { horizontal: \'auto\', vertical: \'auto\' }, widgetParent: null, ignoreReadonly: false, keepOpen: false, focusOnShow: true, inline: false, keepInvalid: false, datepickerInput: \'.datepickerinput\', keyBinds: { up: function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().subtract(7, \'d\')); } else { this.date(d.clone().add(this.stepping(), \'m\')); } }, down: function (widget) { if (!widget) { this.show(); return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().add(7, \'d\')); } else { this.date(d.clone().subtract(this.stepping(), \'m\')); } }, \'control up\': function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().subtract(1, \'y\')); } else { this.date(d.clone().add(1, \'h\')); } }, \'control down\': function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().add(1, \'y\')); } else { this.date(d.clone().subtract(1, \'h\')); } }, left: function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().subtract(1, \'d\')); } }, right: function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().add(1, \'d\')); } }, pageUp: function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().subtract(1, \'M\')); } }, pageDown: function (widget) { if (!widget) { return; } var d = this.date() || this.getMoment(); if (widget.find(\'.datepicker\').is(\':visible\')) { this.date(d.clone().add(1, \'M\')); } }, enter: function () { this.hide(); }, escape: function () { this.hide(); }, //tab: function (widget) { //this break the flow of the form. disabling for now // var toggle = widget.find(\'.picker-switch a[data-action="togglePicker"]\'); // if(toggle.length > 0) toggle.click(); //}, \'control space\': function (widget) { if (!widget) { return; } if (widget.find(\'.timepicker\').is(\':visible\')) { widget.find(\'.btn[data-action="togglePeriod"]\').click(); } }, t: function () { this.date(this.getMoment()); }, \'delete\': function () { this.clear(); } }, debug: false, allowInputToggle: false, disabledTimeIntervals: false, disabledHours: false, enabledHours: false, viewDate: false };
版权声明：本文为sdgtxuyong原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。