Example of using the bootstrap-datetimepicker time plug-in the angular Project,

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.