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
    };