@@ -9,36 +9,36 @@ for browsers which don't yet support the HTML5 date input.
9
9
10
10
### Examples
11
11
12
- ####Falling back to the browser's HTML5 picker if available.
12
+ #### Falling back to the browser's HTML5 picker if available.
13
13
14
14
Set the ` behavior ` option to ` native ` to use the browser's HTML5 date input
15
15
rendering when available.
16
16
17
17
<input class="pat-date-picker" type="date" data-pat-date-picker="behavior: native">
18
18
19
- ####Enforcing the styled non-HTML5 picker universally.
19
+ #### Enforcing the styled non-HTML5 picker universally.
20
20
21
21
By default this pattern will NOT defer to the browser's HTML5 picker.
22
22
23
23
<input class="pat-date-picker" type="date">
24
24
25
- ####Default value
25
+ #### Default value
26
26
27
27
<input class="pat-date-picker" type="date" value="2015-01-01">
28
28
29
- ####First day on Monday
29
+ #### First day on Monday
30
30
31
31
<input class="pat-date-picker" type="date" value="2015-01-01" data-pat-date-picker="first-day: 1">
32
32
33
- ####Specifying the "min" and "max" attributes.
33
+ #### Specifying the "min" and "max" attributes.
34
34
35
35
<input class="pat-date-picker" min="2015-01-01" max="2015-12-31" type="date">
36
36
37
- ####Show the week number.
37
+ #### Show the week number.
38
38
39
39
<input class="pat-date-picker" data-pat-date-picker="week-numbers: show;" type="date">
40
40
41
- ####Multilingual support with German translations
41
+ #### Multilingual support with German translations
42
42
43
43
The picker's UI can be translated by providing a URL to the ` i18n ` option. This
44
44
URL must point to a JSON encoded resource containing the translations.
@@ -55,15 +55,15 @@ Here are all the i18n values in JSON format:
55
55
"weekdaysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
56
56
}
57
57
58
- ####Automatically update one date when changing another
58
+ #### Automatically update one date when changing another
59
59
60
60
You can define one date input to be after another date with the `` after `` option.
61
61
The the other date is changed after the first, it will be automatically updated to be offset days after the first.
62
62
63
63
<input name="start" class="pat-date-picker" type="date"/>
64
64
<input name="end" class="pat-date-picker" type="date" data-pat-date-picker="after: input[name=start]; offset-days: 2;"/>
65
65
66
- ####Format the displayed date
66
+ #### Format the displayed date
67
67
68
68
In the default `` styled `` behavior mode, you can format the displayed date.
69
69
The date input will be hidden and updated with an ISO8601 date to submit values which are machine-readable.
@@ -73,32 +73,6 @@ The locale option allows you to define the language in which the formatted date
73
73
<input class="pat-date-picker" data-pat-date-picker="output-format: Do MMMM YYYY; locale: de" type="date" />
74
74
75
75
76
- ### Why did we base this library on Pikaday?
77
-
78
- When looking for the underlying library to use for this pattern, we compared
79
- pikaday and [ pickadate] ( https://dbushell.github.io/Pikaday/ ) .
80
-
81
- - Prefixed CSS classes
82
-
83
- Pikaday's CSS classes are prefixed to make them unique, whereas Pickadate's
84
- classes are very generic and therefore prone to clash with existing classes and CSS in certain sites.
85
-
86
- - Better markup
87
-
88
- One of the main drawbacks of pickadate is the markup that it produces.
89
- Pickaday's special markup is inserted relative to the input element being overridden.
90
-
91
- In contrast, the markup generated by pikaday is appended to the end of the
92
- ` <body> ` tag, and it then uses absolute positioning to position the picker.
93
-
94
- This is easier to style and less prone to create problems when integrating the
95
- picker in diverse styling environments.
96
-
97
- - Simpler, more modest featureset and Javascript
98
-
99
- Pikaday is only 5KB compressed. The code is AMD aware and easy to read and
100
- understand.
101
-
102
76
### Option reference
103
77
104
78
The HTML5 attributes ` min ` and ` max ` will be honoured.
0 commit comments