[Bootstrap] use Bootstrap datepicker

 

 

Plug-in: http://url.cn/V4S8w4

1. Add styles and reference JS files

<link href="CSS/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.9.1.js" type="text/javascript"></script><script src="js/bootstrap.js" type="text/javascript"></script><script src="js/bootstrap-datetimepicker.js" type="text/javascript"></script>

If the Chinese version is used and the Chinese version is introduced, this JS is also in the downloaded folder and the language is set to "ZH-CN ":

<script src="js/bootstrap-datetimepicker.zh-CN.js" type="text/javascript"></script>

2. Settings

Format Date Format: (this is not the same as the general one. I set the error at the beginning, and I will find it later)

• Yyyy-mm-dd
• Yyyy-mm-dd hh: II
• Yyyy-mm-ddthh: II
• Yyyy-mm-dd hh: II: SS
• Yyyy-mm-ddthh: II: SSZ

Maskinput: True, // disables the text input mask

Pickdate: True, // disables the Date Picker

Picktime: True, // disables de time picker

Pick12hourformat: false, // enables the 12-hour format time picker

Pickseconds: True, // disables seconds in the time picker

Startdate:-infinity, // set a minimum date

Enddate: infinity // set a maximum date

Hourstep: hour interval

Minutestep: interval of minutes

Secondstep:

Laguage: 'en' // ZH-CN

Autoclose: whether to automatically close after selection

Formatstring. default Value: 'Mm/DD/yyyy' date format, p, p, H, HH, I, ii, S, SS, D, DD, M, mm, M, mm, any combination of YY and YYYY. P: meridian in lower case ('am 'or 'pm')-According to locale filep: meridian in upper case ('am 'or 'pm')-According to locale files: seconds without leading zerosss: seconds, 2 digits with leading zerosi: minutes without leading zeroⅱ: Minutes, 2 digits with leading keys: hour without leading zeros-24-hour formathh: hour, 2 digits with leading zeros-24-hour formath: hour withou T leading zeros-12-hour formathh: hour, 2 digits with leading zeros-12-hour formatd: day of the month without leading zerosdd: day of the month, 2 digits with leading zerosm: numeric representation of month without leading usage: numeric representation of the month, 2 digits with leading zerosm: short textual representation of a month, thlettersmm: full textual representation of Month, such as January or marchyy: Two digit representation of a yearyyyy: Full numeric representation of a year, 4 digitsweekstartinteger. Default Value: 0 indicates the day from which the Week begins. 0 (Sunday) to 6 (Saturday) startdatedate. default Value: Start Time the earliest date that may be selected; all earlier dates will be disabled. enddatedate. default Value: End Time the latest date that may be selected; all later dates will be disabled. daysofweekdisabledstring, array. default Value: '', [] days of the week that shoshould be disabled. values are 0 (Sunday) to 6 (Saturday ). multiple values shocould be comma-separated. example: Disable weekends: '0, 6 'or []. autocloseboolean. Default Value: false: whether to disable the datetime selector immediately after a date is selected. Startviewnumber, String. Default Value: 2. view first displayed after the 'month' datetime selector is enabled. Acceptable value: 0 or 'hour 'for the hour view1 or 'day' for the day view2 or 'month' for month view (the default) 3 or 'Year' for the 12-month overview4 or 'Decade 'for the 10-year overview. useful for date-of-birth datetimepickers. minviewnumber, String. default Value: 0. The most accurate time selection view provided by the 'hour 'Date and Time selector. Maxviewnumber, String. Default Value: 4. Select range view with the 'Decade 'Date and Time selector up to display. Todaybtnboolean, "linked". Default Value: false if this value is true or "linked", a "today" button is displayed at the bottom of the datetime selector component to select the current date. If it is true, the "Today" button only transfers the view to the date of the day. If it is "linked", the date of the day will be selected. Todayhighlightboolean. Default Value: false. If the value is true, the current date is highlighted. Keyboardnavigationboolean. Default Value: true: whether the date can be changed using the direction key. Languagestring. default Value: 'en' the two-letter code of the language to use for month and day names. these will also be used as the input's value (and subsequently sent to the server in the case of form submissions ). currently ships with English ('en'), German ('de'), mozilian ('br '), and Spanish ('els') translations, but others can be added (see i18n below ). if an unknown language code is given, English W Ill be used. forceparseboolean. Default Value: True. When the selector is disabled, whether to forcibly parse the value in the input box. That is to say, when you enter an incorrect date in the input box, the selector will try to parse the entered value and set the correct value after resolution to the input box according to the specified format. Minutestepnumber. Default Value: 5. This value is used as a step value to build an hour view. A set of preset time (minutes) is generated for each minutestep for selection. Pickerreferer: string is not recommended. default Value: 'default' (other value available: 'input') the Referer element to place the picker for the component implementation. if you want to place the picker just under the input field, just specify input. pickerpositionstring. default Value: 'bottom-right' (also supported: 'bottom-left'). This option is currently only supported in component implementation. You can set the option to show the selector at the bottom of the inverted input box. Viewselectnumber or string. default Value: Same as minview (supported values are: 'Decade ', 'Year', 'month', 'day', 'hour ') with this option you can select the view from which the date will be selected. by default it's the last one, however you can choose the first one, so at each click the date will be updated. showmeridianboolean. default Value: falsethis option will enable meridian views for day and hour views. initialdatedate 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...

Set

3. Example

<input id="txtDtbegin" name="dtBegin" value="<%=dt2 %>" type="text"  class="form-control">

$(‘#txtDtbegin‘).datetimepicker({                format: ‘yyyy-mm-dd hh:ii:ss‘,                language: ‘zh-CN‘,                pickDate: true,                pickTime: true,                inputMask: true,                pickerPosition: "bottom-left",                autoclose: true            });

 

Some instances exist in the downloaded files.