Summary of datetimepicker usage in Bootstrap

datetimepicker usage summary

Updated April 21, 2016

content

1. Brief description

Recently, because of the project, I used Bootsrapt to write some front desks. When I encountered the datetimepicker, there were some problems in the use. I simply recorded it and I can use it to see it.

2. Official Documentation

Attach the link to the official documentation, the portal for people who need it .

Most of the official documents are in Chinese, which is good, but there are still no examples on many issues. Bloggers, please attach some commonly used ones in the following text. If there are any mistakes, please let me know.

3. Options (Properties)

The overall calling format is:
In jsp:

<input type="text" id="demo" >
  • 1

js:

$("#demo").datetimepicker();
  • 1

3.1 format — format

String type
default value: 'mm/dd/yyyy'
This is one of the most important and commonly used properties. Controlling the display format is all about being fixed and worthy of personalization.
For example, display 2016-04-21 19:21

$("#demo").datetimepicker({
        format:'yyyy-mm-dd hh:ii' 
        });
  • 1
  • 2
  • 3

For another example, if you just like the anti-human format, you can do this:

$("#demo").datetimepicker({
        format:'hh-yyyy-ii mm:dd' 
        });
  • 1
  • 2
  • 3

This is nonsense, it just means, you can design your own style, but the letters in it all represent different attributes:

symbolsignificance
p12-hour clock and lowercase ('am' or 'pm')
P12-hour clock and uppercase ('AM' or 'PM')
sSeconds, do not add 0 in front
ssSeconds, add 0 in front
iPoints, do not add 0 in front
ylpoints, add 0 in front
hHour, 24-hour format, no leading 0
hhHour, 24-hour format, with 0 in front
HHour, 12-hour format, no 0 in front
HHHour, 12-hour clock, with 0 in front
dDay, without 0 in front
ddday, with 0 in front
mMonth, as a number, do not add 0 in front such as: 4
mmMonth, as a number, with 0 in front of it, such as: 04
MMonth, abbreviated, with 0 in front such as: Apr
MMMonth, the full name is indicated, with 0 in front of it, such as: April
yyYear, the last two such as: 16
yyyyYear, all eg: 2016

3.2 weekStart — the day the week starts

Integer type
default value: 0
0 (Sunday) to 6 (Saturday)
For example:

$("#demo").datetimepicker({
        weekStart:3 
        });
  • 1
  • 2
  • 3

Effect:
write picture description here

3.3 startDate — start time

Date type
default value: start time

Dates before this time cannot be selected, and time after this time can only be selected.

Let's make a common demo, that is, we can only choose the time after now:

E.g:

var  date  =  new  Date ();
$("#demo").datetimepicker({
        startDate: date 
        });
  • 1
  • 2
  • 3
  • 4

The gray part in the image above the effect card:
write picture description here

3.4 endDate - end time

Date type
default value: end time

After this time can no longer be selected.
The usage is the same as above, and will not be repeated here.

3.5 daysOfWeekDisabled — the day of the week cannot be selected

String, Array type
default value: ", []


There can be multiple 0 (Sunday) to 6 (Saturday) .

E.g:

$("#demo").datetimepicker({
        daysOfWeekDisabled: [0,4,6]
        });
  • 1
  • 2
  • 3

or:

$("#demo").datetimepicker({
        daysOfWeekDisabled:'0,4,6' 
        });
  • 1
  • 2
  • 3

Effect:
write picture description here

3.6 autoclose — whether to close automatically after the selected time

Type Boolean
Default value: false

Whether to close this datetime picker immediately after selecting a date.

3.7 startView — the view displayed first after the selected time

Number, String type
Default value: 2, 'month'

The first view displayed after the datetime picker is opened.

Acceptable values:

valuesignificance
0Start with hour view, pick minutes
1Start with day view, select hour
2Start with month view, select day
3Start with year view, select month
4Start with a decade view, choose a year

3.8 minView — the most accurate time

Number, String type
default value: 0, 'hour'

The most precise view of time selection that a datetime picker can provide.

Acceptable values:

valuesignificance
0Start with hour view, pick minutes
1Start with day view, select hour
2Start with month view, select day
3Start with year view, select month
4Start with a decade view, choose a year

E.g:

$("#demo").datetimepicker({
        minView :2 
        });
  • 1
  • 2
  • 3

In the above example, after the day is selected, the lower-level time selection does not appear.

3.9 maxView — maximum display time

Number, String type
Default value: 4, 'decade'

The maximum selection range view that the datetime picker can display.

The usage is the same as above and will not be repeated.

3.10 todayBtn — today's date button

Boolean, 'linked' type
Default: false'

If this value is true or "linked", a "Today" button is displayed at the bottom of the datetime picker component to select the current date. If true, the "Today" button will only turn the view to today's date, if "linked", the today's date will be selected.

E.g:

$("#demo").datetimepicker({
        todayBtn : true
        });
  • 1
  • 2
  • 3

Effect:
write picture description here

3.11 todayHighlight — today's date highlight

Type Boolean
Default value: false

If true, highlight the current date.

No more examples.

3.12 keyboardNavigation — Arrow keys change date

Type Boolean
Default value: false

Whether to allow the date to be changed by the arrow keys.

No more examples.

3.13 language — language

String type
default value: 'en'

Chinese: 'zh-CN'

3.14 forceParse — force parsing

Type Boolean
Default value: true

That is, what you input may be irregular, but it is forced to try to parse it into the format you specify.

3.15 minuteStep — step value

Number type
default value: 5

This value is used as the step value to build the hour view. That is, the smallest view is selectable every 5 minutes. is in minutes.

3.16 pickerPosition — picker position

String type
default value: 'bottom-right'

Also supported: 'bottom-left', 'top-right', 'top-left'

You can try it out, his position will change when he takes it out.

3.17 showMeridian — whether to show morning and afternoon

Type Boolean
Default value: false

In the date and hour selection interface, the options for morning and afternoon appear

3.18 initialDate — initialize datetime

Date or String type
default value: new Date()

The current time is selected by default when it is opened, and it is displayed in the View.


above.

Related: Summary of datetimepicker usage in Bootstrap