Welcome all kinds of spit groove.
I small front-end, learning process, a day to meet the need to do time control, so endless call the degree Niang, found not very understand. is to make a note for themselves, but also easy to see the rookie level of understanding.
First, let's take a look at the show page when you click on select Time.
Month Day
Time & nbsp points last afternoon , &NB sp;
Small view
We will download this date control. Baidu Bootstrap date control can be.
The files you need on the page are:
BOOTSTRAP.MIN.CSS (contains bootstrap all CSS)
Bootstrap-datetimepicker.min.css (Important, this is the style sheet required for the date control)
Jquery-1.8.3.min.js (Other versions of jquery can also)
Bootstrap.min.js (contains bootstrap all JS)
Bootstrap-datetimepicker.js (Important, this is the JS required for the date control)
Locales/bootstrap-datetimepicker.fr.js (important, here is the date control initial value)
HTML page is such a drop ~
<!DOCTYPE HTML><HTMLLang= "en"> <Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Title</title> <Metaname= "description"content="" /> <Metaname= "Author"content="" /> <Linkhref= "Bootstrap.min.css"rel= "stylesheet" />/* (contains bootstrap all CSS) */<Linkhref= "Bootstrap-datetimepicker.min.css"rel= "stylesheet" />/* (important, this is the style sheet required for the date control) */</Head> <Body> <Div>Here to write the code you need, such as what you want is a simple input box time control to write the code of the input box, as follows several styles introduced</Div> <Scripttype= "Text/javascript"src= "Jquery.js"></Script>/* (important, jquery dependent) */<Scripttype= "Text/javascript"src= "Bootstrap.min.js"></Script>/* (contains bootstrap all JS) */<Scripttype= "Text/javascript"src= "Bootstrap-datetimepicker.js"></Script>/* (important, this is the JS required by the date control) */<Scripttype= "Text/javascript"src= "Locales/bootstrap-datetimepicker.fr.js"></Script>/* (Important, the text displayed in the pop-up calendar
Bootstrap inside the display is English, after triggering the display of the month and day of the text, that is: Jan,feb and so on) * *<Scripttype= "Text/javascript">here Write your own JS, call the time selector, that is, the activation date selector, that is, the following JS</Script> </Body>
When the file is referenced, we start setting up the date control.
There are different styles of writing according to different needs.
The first type is the simplest input box
Code:
<type= "text" value= "2014-09-23 23:05" ID= " DateTimePicker ">
Js:
$ (' #datetimepicker ' yyyy-mm-dd hh:ii '/ * * This property is displayed in order, and the order of display is mm-dd-yyyy* / });That's what it says.
Code:
< input type = "text" = "2012-05-15 21:05" ID = "DateTimePicker" Data-date-format = "Yyyy-mm-dd hh:ii" >
Js:
$ (' #datetimepicker '). DateTimePicker ();When used as a component
The code is like this
<Divclass= "Input-append Date"ID= "DateTimePicker"data-date= "12-02-2012"Data-date-format= "Dd-mm-yyyy"> <inputsize= "+"type= "text"value= "12-02-2012"ReadOnly> <spanclass= "Add-on"><Iclass= "Icon-th"></I></span></Div>
Js:
$ (' #datetimepicker '). DateTimePicker ();As the inline date time picker:
The code is this:
<id= "DateTimePicker"></div>
Js:
$ (' #datetimepicker '). DateTimePicker ();In the above introduction, JS part is must write in the page, note to write in the last page. (JS relies on files such as jquery and Bootstrap)
See the blue text that appears above? Didn't see it?! All right, write it again.
$ (' #datetimepicker '). DateTimePicker ({ ' yyyy-mm-dd hh:ii '/ * * This property is the display order, And the display order is mm-dd-yyyy*/});See, what is the format inside? This is the parameter of the date selector. What's the use of it? This is used to set some properties of the date selector . For example, I want to set the time control I want. I want to show the month instead of the year when I click on the selection, I want the order of time is dd-mm-yyyy, this time need parameter to set up. Let's take a look at some of the parameter settings below.
FormatThis is a must-have set.
String. Default value: ' Mm/dd/yyyy '
Date format, p, p, h, HH, I, II, S, SS, D, DD, M, MM, m, mm, yy, yyyy any combination.
WeekstartInteger. Default value: 0
Which day of the week begins. 0 (Sunday) to 6 (Saturday)
StartDateDate. Default value: Start time
The earliest date is may selected; All earlier dates'll be disabled.
EndDateDate. Default value: End time
The latest date is may selected; All later dates'll be disabled.
Daysofweekdisabled Day of the week disabledString, Array. Default value: ', []
Days of the week this should be disabled. Values is 0 (Sunday) to 6 (Saturday). Multiple values should be comma-separated. Example:disable Weekends: ‘0,6‘ or [0,6] .
Boolean. Default value: False
Whether to close this date time picker immediately after a date is selected.
StartviewNumber, String. Default value: 2, ' month '
The view that is displayed first after the date time selector is opened. Acceptable values are:
Number, String. Default value: 0, ' hour '
The most accurate time-selection view that a DateTime selector can provide.
MaxviewNumber, String. Default value: 4, ' decade '
The selection range view that the date time selector can display most.
TodaybtnBoolean, "linked". Default value: False
If this value is true or "linked", a "Today" button is displayed at the bottom of the date-time selector component to select the current date. If true, the "Today" button simply transfers the view to the date of the day, and if it is "linked", the day date will be selected.
TodayhighlightBoolean. Default value: False
If true, the current date is highlighted.
KeyboardnavigationBoolean. Default value: True
Whether the date is allowed to be changed by the arrow keys.
LanguageString. Default value: ' En '
The Two-letter code of the language to use for month and day names. These would also is used as the input ' s value (and subsequently sent to the server in the case of form submissions). Currently ships with 中文版 (' en '), German (' de '), Brazilian (' BR '), and Spanish (' es ') translations, but others can a dded (see i18n below). If An unknown language code is given, 中文版 is being used.
ForceparseBoolean. Default value: True
Whether to force parsing of values in the input box when the selector is closed. That is, when the user enters an incorrect date in the input box, the selector will parse the input value as much as possible and set the parsed correct value format to the input box in the given format.
Number. Default value: 5
This value is used as a stepping value to build the hour view. For each minuteStep , a set of preset times (minutes) is generated for selection.
String. Default value: ' Default ' (other value available: ' Input ')
The Referer element to place the picker for the component implementation. If you want the picker just under the input field, just specify input .
String. Default value: ' Bottom-right ' (also supports: ' Bottom-left ')
This option currently provides support only in component implementations. By setting the options you can tell the selector to drop down below the input box.
ViewselectNumber or String. Default value: same as minView (Supported values is: ' Decade ', ' year ', ' Month ', ' Day ', ' hour ')
With this option you can select the view from which the date would be selected. By default It's the last one, however you can choose the first one, so at each click of the date would be updated.
ShowmeridianBoolean. Default value: False
This option would enable Meridian views for and views day hour .
A Date or String. Default value: New Date ()
You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...
The bootstrap date selector has a lot of properties, which gives the user a greater selectivity to define the date control they want based on the requirements of the project.
Wrote so many messy, I did not understand, in the end how to write it?
$ (". Form_datetime"). DateTimePicker ({ format:' Yyyy-mm-dd ', autoclose:true ,//auto-off minview:2,//The most accurate time choice for the date 0-minute 1-time 3-month Weekstart:0 } );Not finished ....
Bootstrap-datetimepicker Time Control
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
