Bootstrap DateTimePicker Time Date control

GitHub Address: Https://github.com/smalot/bootstrap-datetimepicker

Both Date and Time Picker widget based on Twitter bootstrap (supports Bootstrap v2 and v3) Http://www.malot.fr/boo tstrap-datetimepicker/

Bind the input box and set the format option:

1. <input Type= "text" value="2012-05-15 21:05" id=" DateTimePicker ">

1. $(' #datetimepicker '). DatetimepickeR({
2. Format: ' yyyy-mm-dd hh:ii '
3. });

Bind the input box and set the format tag:

1. <input Type= "text" value="2012-05-15 21:05" id=" DateTimePicker " data-date-format=" Yyyy-mm-dd hh:ii ">

1. $(' #datetimepicker '). DateTimePicker();

Use as component:

2. <div class= "Input-append Date" id= "DateTimePicker" data-date= "12-02-2012" data-date-format= "dd-mm-yyyy" >
4. <input size="+" type="text" value="12-02-2012" readonly>
6. <span class="add-on"><i class="icon-th"></ i></span>
8. </div>

1. $(' #datetimepicker '). DateTimePicker();

As the inline date time picker:

1. <div id="DateTimePicker"></div>

1. $(' #datetimepicker '). DateTimePicker();

Set 2 date input box end time not less than start time

$ (". Form_datetime"). DateTimePicker ({

Todaybtn:true,

Language: ' ZH-CN ',
Autoclose:true,
Todayhighlight:true,
Startview:2,

Minview:2,
Forceparse:true,

Format: ' Yyyy-mm-dd '
})；

By default, there is no association between the start date and the end date, and we need to set it up.

// Date Time Picker $ ("#datetimeStart"). DateTimePicker ({    "Yyyy-mm-dd",    true  ,    "Month",    "decade",    true,    "Bottom-left" }). On ("click",

, function   (EV) {$ ( "#datetimeStart "). DateTimePicker (" Setenddate ", $ (" #datetimeEnd " "#datetimeEnd" " YYYY-MM-DD ", AutoClose:  true  , Minview:  " Month " "decade" , Todaybtn:  Span style= "color: #0000ff;" >true  " bottom-left "}) . On ("click"  function   (EV) {$ ( "# Datetimeend "). DateTimePicker (" Setstartdat  E ", $ (" #datetimeStart " 

Click Time and ChangeDate event is different, just start no date, after the selection date is not triggered changedate time, click is triggered, we want to start with a limited time, so use the Click event.

SE tstartdate

Parameters:

• StartDate (String)

Set a new start date for the date time selector.

1. $(' #datetimepicker '). DateTimePicker(' setstartdate ', ' 2012-01-01 ');

Omit StartDate (or provide an otherwise Falsey value) to unset the limit.

1. $(' #datetimepicker '). DateTimePicker(' setstartdate ');
2. $(' #datetimepicker '). DateTimePicker(' setstartdate ', null);

ChangeDate

Triggered when the date is changed.

2. $(' #date-end ')
4. . DateTimePicker()
6. . On (' changedate ', function(ev) {
8. if (ev. Date. ValueOf() < date-start-display. ValueOf()) {
10. ....
12. }
14. });

Set start time not less than today's date

functionGettoday () {varD=NewDate (); varStr= ""; STR+=d.getfullyear () + "-"; varMonth=d.getmonth (+1); if(month<10) Month= "0" +month; varday=d.getdate (); if(day<10) Day= "0" +Day ; STR+=month; STR+="-"; STR+=Day ; returnstr; }    $("#start"). On (' ChangeDate ',function(EV) {vartoday=Gettoday (); $("#start"). DateTimePicker (' Setstartdate ', today); });

Configuration options:

$ ("' #datetimepicker"). DateTimePicker ({format:"Yyyy-mm-dd Hh:ii:ss",//set time format, default value: ' Mm/dd/yyyy 'weekstart:0,//which day of the week begins. 0 (Sunday) to 6 (Saturday), default value 0StartDate: "2013-02-14 10:00",//The earliest time that can be selectedEndDate: "2016-02-14 10:00",//The latest time that can be selecteddaysofweekdisabled: "0,6",//prohibit the selection of certain days of the week, in this case it is forbidden to select Saturday and SundayAutoClose:true,//whether to close this date and time selector immediately after a date is selectedStartview:2,//Click the interface that appears after the plugin is opened. 0, Hour 1, Day 2, Month 3, Year 4, ten years, default value 2minview:0,//plug-ins can be accurate to that time, such as 1, you can only choose to days, not the choice of hoursMaxview:4,//similarlyTODAYBTN:true,//whether the "Today" button is displayed at the bottomTodayhighlight:true,//whether to highlight the current timeKeyboardnavigation:true,//whether to allow the keyboard to select timeLanguage: ' ZH-CN ',//Select a language, provided that the language has been importedForceparse: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 to the input box in the given format .Minutestep:5,//Interval of minutesPickerposition: "Bottom-right",//the location shown, also supports Bottom-leftviewselect:0,//the default and Minview are the sameShowmeridian:true,//whether to add gridInitialdate: "2015-02-14 10:00"//Time of initialization});

Chapter II Time Control (DateTime picker)

Bootstrap DateTimePicker Time Date control