总统来说，关键是引用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 };