Example of using the bootstrap-datetimepicker time plug-in the angular Project,
I. Requirements:
The functions that are often used in the background system are used to select a time range and filter some information based on the time range, such as the registered users in a certain period of time.
Ii. Final Results
3. files to be introduced (src/index.html)
Note: 1. The jQuery file is referenced first, because the plug-in on the initialization date is, you need to find the object in the DOM and add some styles;
2. We can see that the bootstrap.min.css file is not used in our project. This is because the style is referenced globally in index.html, which has a great impact on the style you have already written. The effect is that the style is messy. What you see (the first image) you need to write a shared style and reference it in each component.
The specific style will not be added. I believe that if you reference this plug-in, you will think of a cream chocolate, and you will have a sense of accomplishment ~
Iv. Code
A. To Date
(Html code)
<! -- Select the time datetimepicker and select To the day --> <div> <label class = "date-label-width"> time (To Date ): </label> <div class = "input-group date form_datetime date-div-inline"> <input type = "datetime" size = "16" id = "startTime" name = "startTime" class = "date-input-size date-minute-bgcolor" value = "" readonly> <span class = "input-group-addon date-div-inline"> <span class = "fa-calendar fa-lg"> </span> </div> <label for = "endTime">-</label> <div class = "input-group date form_datetime date-div-inline"> <input type = "datetime" id = "endTime" name = "endTime" class = "date-input- size date-minute-bgcolor "value =" "readonly> <span class =" input-group-addon date-div-inline "> <span class =" fa-calendar fa -lg "> </span> </div>
JS Code
// Initialize the date plug-in -- select to day $ ('# starttime '). datetimepicker ({format: 'yyyy-mm-dd', // display format todayHighlight: 1, // highlight minView: "month" today, // set to display only to startView of month: 2, forceParse: 0, showMeridian: 1, autoclose: true, // language: 'zh-cn', weekStart: 1, // todayBtn: 1, // autoclose: 1, // todayHighlight: 1, // startView: 2, // minView: 2, // forceParse: 0, // pickerPosition: 'bottom-Right' // the position where the date plug-in pops up }). on ("changeDate", function () {$ ('# endtime '). datetimepicker ('setstartdate', $ ("# startTime "). val (); console. log ($ ("# startTime "). val (); $ ("# endTime "). focus ()}); $ ('# endtime '). datetimepicker ({format: 'yyyy-mm-dd', // display format todayHighlight: 1, // highlight minView: "month" today, // set to display only to startView of month: 2, forceParse: 0, showMeridian: 1, autoclose: true, // language: 'zh-cn', weekStart: 1, // todayBtn: 1, // autoclose: 1, // todayHighlight: 1, // startView: 2, // minView: 2, // forceParse: 0, // pickerPosition: 'bottom-Right' // the position where the date plug-in pops up }). on ("changeDate", function () {$ ('# starttime '). datetimepicker ('setenddate', $ ("# endTime "). val (); console. log ($ ("# endTime "). val ());});
The format parameter can be used to set the date format, yyyy-mm-dd, yyyy/mm/dd
B. To Minute
(Html code)
<! -- Select the time datetimepicker To the Minute --> <div> <label for = "dtp_input1" class = "date-label-width"> time (To Minute ): </label> <div class = "input-group date form_datetime date-div-inline" data-date = "" data-date-format = "dd MM yyyy-HH: ii p "data-link-field =" dtp_input1 "> <input class =" date-input-size "id =" startTimeMinute "size =" 16 "type =" text "value = "" readonly> <span class = "input-group-addon date-div-inline"> <span cl Ass = "fa-calendar fa-lg"> </span> <! -- <Span class = "input-group-addon"> <span class = "glyphicon-th"> </span> --> </div> <input type = "hidden" id = "dtp_input1" value = ""/> <label for = "dtp_input2">-</label> <div class = "input-group date form_datetime date -div-inline "data-date =" "data-date-format =" dd MM yyyy-HH: ii p "data-link-field =" dtp_input1 "> <input class =" date-input-size "id =" endTimeMinute "size =" 16 "type =" text "value = "" Readonly> <span class = "input-group-addon date-div-inline"> <span class = "fa-calendar fa-lg"> </span> </span> <! -- <Span class = "input-group-addon"> <span class = "glyphicon-th"> </span> --> </div> <input type = "hidden" id = "dtp_input2" value = ""/> </div>
(JS Code)
/// Initialization date plug-in -- select to minute $ ('# startTimeMinute '). datetimepicker ({// language: 'F', format: 'yyyy-mm-dd hh: II', // display format: weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }). on ("changeDate", function () {$ ('# endTimeMinute '). datetimepicker ('setstartdate', $ ("# startTimeMinute "). val (); console. log ($ ("# startTimeMinute "). val (); $ ("# endTimeMinute "). focus ()}); $ ('# endTimeMinute '). datetimepicker ({// language: 'F', format: 'yyyy-mm-dd hh: II', // display format: weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1 }). on ("changeDate", function () {$ ('# startTimeMinute '). datetimepicker ('setenddate', $ ("# endTimeMinute "). val (); console. log ($ ("# endTimeMinute "). val ());});
Note: because it is a time interval, the first input is the start time, the second is the end time, And the start time must be before the end time. Therefore, the id must be added to the input, instead of div.
So far, I have seen the desired results. The above is all the content in this article. I hope it will help you learn and support the house of helping customers.