Bootstrap 3 time zone DateTimePicker and multiple language problems __bootstrap

Article Author: Tyan
Blog: noahsnail.com

In Web application development, especially front-end development, often encountered a problem is time selection problem, fortunately Bootstrap has provided us with time to select control DateTimePicker, but in the actual development of DateTimePicker will still have some small problems , such as a time zone transformation that displays times according to the state. The author also touched a lot of holes before the control of the use of clear, recorded to provide a reference for the latter.

This article uses the DateTimePicker control for Eonasdan-bootstrap-datetimepicker, it is based on the Bootstrap 3, the official website address is: https://eonasdan.github.io/ bootstrap-datetimepicker/ requirements for using this control: jQuery website: https://jquery.com/Moment.js includes Moment-timezone, Now moment and timezone separate, official website: http://momentjs.com/Bootstrap.js (transition and collapse are required if you ' re not using the FU ll Bootstrap) Official website: http://getbootstrap.com/Bootstrap datepicker script Bootstrap css Bootstrap datepicker css Locales:mome NT ' s locale files are here The basic configuration is as follows (path to modify yourself):

Stylesheet <link rel= "stylesheet" href= ". /bootstrap/css/bootstrap.min.css "/> <link rel=" stylesheet "href=". /bootstrap/css/bootstrap-theme.min.css "/> <link rel=" stylesheet "href=". /bootstrap-datepicker/css/bootstrap-datepicker3.min.css "/> <link rel=" stylesheet "href=". /eonasdan-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css "/>//js <script src=". /class.support/class.support.min.js "></script> <script src=". /jquery/jquery.min.js "></script> <script src=". /moment/moment.min.js "></script>//corresponding time zone <script src=". /moment/locales.min.js "></script>//corresponding localization <script src=". /moment/moment-timezone-with-data.min.js "></script> <script src=". /bootstrap/js/bootstrap.min.js "></script> <script src=". /bootstrap-datepicker/js/bootstrap-datepicker.min.js "></script> <script src=". /eonasdan-bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js "></script>

control uses:

HTML code:
<div class= "Input-group date  id=" TestDate ">
    <input class=" Form-control "type=" text "/>
    <span class=" Input-group-addon "> <span class=" Glyphicon Glyphicon-calendar "></span
        >
    </span>
</div>

//jquery code

$ (' #testDate '). DateTimePicker ({
    sidebyside: True//can select both date and time
});
$ (' #testDate '). Data (' DateTimePicker '). Format (' Yyyy-mm-dd hh:mm '); Format Date explicit format
$ (' #testDate '). Data (' DateTimePicker '). Date (Moment ());//Set control time

The effect is as follows:

The above code is just a basic usage, the time used is the system default time, if you want to specify the time zone for the control explicit times, the code is as follows:

Moment.tz.setDefault (' Asia/seoul '); Set the moment time zone
$ (' #testDate '). Data (' DateTimePicker '). TimeZone (' Asia/seoul ');//Set Control time zone

Note: Both need to be set and corresponding, otherwise there will be a variety of strange problems, the author has suffered a great loss. With these two lines of code, you can support a multiple-country time display, which can be explicitly corresponded to the selected country.

In the background save time, you need to save as a long timestamp (timestamp) with the following code:

var TestDate = Moment ($ (' #testDate '). Data (' DateTimePicker '). Date ()). Format (' x ');

When the data is read from the back end to the front end, the code is:

Moment.tz (testdate, ' Asia/seoul '). Format (' Yyyy/mm/dd hh:mm ')//display time corresponding to timezone

Note: The time displayed is the corresponding time of the preservation period, so that the time to save and read the display time is consistent.

In addition to the time zone above, there may be a problem with the localization of the control, that is, the language of the control is consistent with the state, as follows:

$ (' #testDate '). Data (' DateTimePicker '). Locale (' Ko '); Set the language of the control

Effect as shown:

Summary: eonasdan-bootstrap-datetimepicker This control function is very powerful, of course, rely on a lot of things, online useful to solve your problem is not a lot of information, Many functions need to see the document to explore. This article is mainly to explore the localization of control, the so-called localization refers to the corresponding time according to the state, the control shows the language of the corresponding country, the time to save and then take out the consistency of the display time, can be made to support a multilingual control, and according to the choice of the country automatically modify the control language and control time.