datetimepicker usage summary of Bootstrap

bootstrap Time Control Reference Document (detours)

https://blog.csdn.net/hizzyzzh/article/details/51212867#31-format-%E6%A0%BC%E5%BC%8F

We need to introduce js and css files:

https://files.cnblogs.com/files/likui-bookHouse/datetimepicker.rar

 

 

When selecting the minutes and seconds of time controls support

html code:

<div class = " form-Group COL-XS-. 6 " > 
                <label class = " COL-XS-. 1 Control-label " issued time in> </ label> 
                <div class = " COL-XS-. 3 " style = " width: 205px; " > 
                    <div class = " Controls Group-INPUT " > 
　　　　　　　　　　　　　　time points to load the page displayed by default //@ViewBag.BeginDate     
                        <span ID = " beginDateCtl " class="input-group date form_date" data-date="@ViewBag.BeginDate" data-date-format="yyyy-mm-dd hh:i:ss" data-link-format="yyyy-mm-dd hh:i:ss" data-link-field="begintime">
                            <input class="form-control" id="searchBeginDate" style="width:160px" type="text" value="@ViewBag.Start Date ">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </span>
                    </div>
                </div>
                <label class="col-xs-1 control-label" style="width:30px;text-align:center;">---</label>

                <div class="col-xs-3">
                    <div class="controls input-group">
                        <span id="endDateCtl" class="input-group date form_date" data-date="@ViewBag.EndDate" data-date-format="yyyy-mm-dd hh:i:ss" data-link-format="yyyy-mm-dd hh:i:ss" data-link-field="endtime">
                            <input class="form-control" id="searchEndDate" style="width:160px" type="text" value="@ViewBag.EndDate">
                            <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                        </span>
                    </div>
                </div>
            </div>

data-date-format = "yyyy-mm-dd hh: i: ss" time in 24-hour format "yyyy-mm-dd HH: i: ss" 12-hour

 

JS code:

var DATE = new new a Date ();
 $ (function () { 
    $ ( ' .form_date ' ) .datetimepicker ({ 
        Language: ' ZH-the CN ' , 
        the CustomFormat: ' YYYY-mm-dd HH: mm: SS ' , 
        weekStart: 1 , 
        todayBtn: 1 ,             // display the day button, then click to select the day, time of day 
        AutoClose: 1 ,           // finished selecting the time automatically shut down 
        todayHighlight: 1 ,       // the time of day highlighting 
        startView: 2 ,           // From the month view, the election day 
        minView: 0 ,              // minute offers choice views 
        forceParse: 0 ,       
　　　　　startDate: DATE,        // only choose time after the current time 
        minuteStep: 1            // used to construct hour view. The minimum is one view per minute is optional. Are in minutes 
    }); 
    $ ( " [Data-Toggle = 'the popover'] " ) .popover ();
     // end time must be greater than the start time, or end time of emptying 
    $ ( ' #beginDateCtl ' ) .on ( ' changeDate ' , function (EV) { 
        $ ( ' #endDateCtl ' ) .datetimepicker ( 'setStartDate', ev.date);
        var d = $('#searchEndDate').val();
        if (d) {
            var date = new Date(d.replace(/-/g, '/'));
            if (date != 'Invalid Date' && date < ev.date) {
                $('#searchEndDate').val("");
            }
        }
    });
   

})