@ohos-ports/flowbite-datepicker 2.0.0-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (291) hide show
  1. package/.eslintignore +2 -0
  2. package/.eslintrc.js +73 -0
  3. package/.stylelintrc +12 -0
  4. package/CHANGELOG.md +72 -0
  5. package/LICENSE +21 -0
  6. package/README.md +71 -0
  7. package/demo/index.html +582 -0
  8. package/demo/live-demo.js +471 -0
  9. package/dist/DateRangePicker.cjs.js +2996 -0
  10. package/dist/DateRangePicker.esm.js +2994 -0
  11. package/dist/DateRangePicker.umd.js +3002 -0
  12. package/dist/Datepicker.cjs.js +2778 -0
  13. package/dist/Datepicker.esm.js +2776 -0
  14. package/dist/Datepicker.umd.js +2784 -0
  15. package/dist/css/datepicker-bs4.css +276 -0
  16. package/dist/css/datepicker-bs4.min.css +1 -0
  17. package/dist/css/datepicker-bs5.css +276 -0
  18. package/dist/css/datepicker-bs5.min.css +1 -0
  19. package/dist/css/datepicker-bulma.css +258 -0
  20. package/dist/css/datepicker-bulma.min.css +1 -0
  21. package/dist/css/datepicker-foundation.css +262 -0
  22. package/dist/css/datepicker-foundation.min.css +1 -0
  23. package/dist/css/datepicker.css +306 -0
  24. package/dist/css/datepicker.min.css +1403 -0
  25. package/dist/js/datepicker-full.js +2777 -0
  26. package/dist/js/datepicker-full.min.js +1 -0
  27. package/dist/js/datepicker.js +2569 -0
  28. package/dist/js/datepicker.min.js +1 -0
  29. package/dist/js/locales/ar-tn.js +15 -0
  30. package/dist/js/locales/ar.js +15 -0
  31. package/dist/js/locales/az.js +14 -0
  32. package/dist/js/locales/bg.js +14 -0
  33. package/dist/js/locales/bm.js +18 -0
  34. package/dist/js/locales/bn.js +19 -0
  35. package/dist/js/locales/br.js +18 -0
  36. package/dist/js/locales/bs.js +15 -0
  37. package/dist/js/locales/ca.js +18 -0
  38. package/dist/js/locales/cs.js +19 -0
  39. package/dist/js/locales/cy.js +14 -0
  40. package/dist/js/locales/da.js +19 -0
  41. package/dist/js/locales/de.js +18 -0
  42. package/dist/js/locales/el.js +16 -0
  43. package/dist/js/locales/en-AU.js +18 -0
  44. package/dist/js/locales/en-CA.js +18 -0
  45. package/dist/js/locales/en-GB.js +18 -0
  46. package/dist/js/locales/en-IE.js +17 -0
  47. package/dist/js/locales/en-NZ.js +17 -0
  48. package/dist/js/locales/en-ZA.js +17 -0
  49. package/dist/js/locales/eo.js +17 -0
  50. package/dist/js/locales/es.js +18 -0
  51. package/dist/js/locales/et.js +18 -0
  52. package/dist/js/locales/eu.js +18 -0
  53. package/dist/js/locales/fa.js +17 -0
  54. package/dist/js/locales/fi.js +17 -0
  55. package/dist/js/locales/fo.js +15 -0
  56. package/dist/js/locales/fr-CH.js +21 -0
  57. package/dist/js/locales/fr.js +18 -0
  58. package/dist/js/locales/gl.js +16 -0
  59. package/dist/js/locales/he.js +15 -0
  60. package/dist/js/locales/hi.js +18 -0
  61. package/dist/js/locales/hr.js +13 -0
  62. package/dist/js/locales/hu.js +18 -0
  63. package/dist/js/locales/hy.js +18 -0
  64. package/dist/js/locales/id.js +15 -0
  65. package/dist/js/locales/is.js +14 -0
  66. package/dist/js/locales/it-CH.js +20 -0
  67. package/dist/js/locales/it.js +18 -0
  68. package/dist/js/locales/ja.js +17 -0
  69. package/dist/js/locales/ka.js +17 -0
  70. package/dist/js/locales/kk.js +15 -0
  71. package/dist/js/locales/km.js +15 -0
  72. package/dist/js/locales/ko.js +18 -0
  73. package/dist/js/locales/lt.js +19 -0
  74. package/dist/js/locales/lv.js +18 -0
  75. package/dist/js/locales/me.js +17 -0
  76. package/dist/js/locales/mk.js +15 -0
  77. package/dist/js/locales/mn.js +17 -0
  78. package/dist/js/locales/mr.js +18 -0
  79. package/dist/js/locales/ms.js +15 -0
  80. package/dist/js/locales/nl-BE.js +18 -0
  81. package/dist/js/locales/nl.js +18 -0
  82. package/dist/js/locales/no.js +18 -0
  83. package/dist/js/locales/oc.js +17 -0
  84. package/dist/js/locales/pl.js +17 -0
  85. package/dist/js/locales/pt-BR.js +17 -0
  86. package/dist/js/locales/pt.js +18 -0
  87. package/dist/js/locales/ro.js +17 -0
  88. package/dist/js/locales/ru.js +18 -0
  89. package/dist/js/locales/si.js +18 -0
  90. package/dist/js/locales/sk.js +18 -0
  91. package/dist/js/locales/sl.js +15 -0
  92. package/dist/js/locales/sq.js +18 -0
  93. package/dist/js/locales/sr-latn.js +16 -0
  94. package/dist/js/locales/sr.js +16 -0
  95. package/dist/js/locales/sv.js +17 -0
  96. package/dist/js/locales/sw.js +15 -0
  97. package/dist/js/locales/ta.js +18 -0
  98. package/dist/js/locales/tg.js +19 -0
  99. package/dist/js/locales/th.js +14 -0
  100. package/dist/js/locales/tk.js +18 -0
  101. package/dist/js/locales/tr.js +17 -0
  102. package/dist/js/locales/uk.js +17 -0
  103. package/dist/js/locales/uz-cyrl.js +18 -0
  104. package/dist/js/locales/uz-latn.js +18 -0
  105. package/dist/js/locales/vi.js +16 -0
  106. package/dist/js/locales/zh-CN.js +19 -0
  107. package/dist/js/locales/zh-TW.js +18 -0
  108. package/dist/locales/index.cjs.js +1028 -0
  109. package/dist/locales/index.esm.js +1028 -0
  110. package/dist/main.cjs.js +2999 -0
  111. package/dist/main.esm.js +2994 -0
  112. package/dist/main.umd.js +3005 -0
  113. package/docs/.nojekyll +0 -0
  114. package/docs/README.md +266 -0
  115. package/docs/_sidebar.md +6 -0
  116. package/docs/api.md +284 -0
  117. package/docs/date-string+format.md +90 -0
  118. package/docs/i18n.md +99 -0
  119. package/docs/images/datepicker-inline.jpg +0 -0
  120. package/docs/images/datepicker.jpg +0 -0
  121. package/docs/images/multidate.jpg +0 -0
  122. package/docs/images/picker-structure.jpg +0 -0
  123. package/docs/images/rangepicker.jpg +0 -0
  124. package/docs/images/view-days.jpg +0 -0
  125. package/docs/images/view-decades.jpg +0 -0
  126. package/docs/images/view-months.jpg +0 -0
  127. package/docs/images/view-years.jpg +0 -0
  128. package/docs/index.html +26 -0
  129. package/docs/options.md +354 -0
  130. package/docs/overview.md +174 -0
  131. package/extras/twoDigitToFullYear/test/twoDigitToFullYear.js +58 -0
  132. package/extras/twoDigitToFullYear/twoDigitToFullYear.js +26 -0
  133. package/js/DateRangePicker.js +210 -0
  134. package/js/Datepicker.js +487 -0
  135. package/js/datepicker-full.js +5 -0
  136. package/js/events/functions.js +48 -0
  137. package/js/events/inputFieldListeners.js +206 -0
  138. package/js/events/otherListeners.js +15 -0
  139. package/js/events/pickerListeners.js +70 -0
  140. package/js/i18n/base-locales.js +13 -0
  141. package/js/i18n/locales/ar-tn.js +15 -0
  142. package/js/i18n/locales/ar.js +15 -0
  143. package/js/i18n/locales/az.js +14 -0
  144. package/js/i18n/locales/bg.js +14 -0
  145. package/js/i18n/locales/bm.js +18 -0
  146. package/js/i18n/locales/bn.js +19 -0
  147. package/js/i18n/locales/br.js +18 -0
  148. package/js/i18n/locales/bs.js +15 -0
  149. package/js/i18n/locales/ca.js +18 -0
  150. package/js/i18n/locales/cs.js +19 -0
  151. package/js/i18n/locales/cy.js +14 -0
  152. package/js/i18n/locales/da.js +19 -0
  153. package/js/i18n/locales/de.js +18 -0
  154. package/js/i18n/locales/el.js +16 -0
  155. package/js/i18n/locales/en-AU.js +18 -0
  156. package/js/i18n/locales/en-CA.js +18 -0
  157. package/js/i18n/locales/en-GB.js +18 -0
  158. package/js/i18n/locales/en-IE.js +17 -0
  159. package/js/i18n/locales/en-NZ.js +17 -0
  160. package/js/i18n/locales/en-ZA.js +17 -0
  161. package/js/i18n/locales/eo.js +17 -0
  162. package/js/i18n/locales/es.js +18 -0
  163. package/js/i18n/locales/et.js +18 -0
  164. package/js/i18n/locales/eu.js +18 -0
  165. package/js/i18n/locales/fa.js +17 -0
  166. package/js/i18n/locales/fi.js +17 -0
  167. package/js/i18n/locales/fo.js +15 -0
  168. package/js/i18n/locales/fr-CH.js +21 -0
  169. package/js/i18n/locales/fr.js +18 -0
  170. package/js/i18n/locales/gl.js +16 -0
  171. package/js/i18n/locales/he.js +15 -0
  172. package/js/i18n/locales/hi.js +18 -0
  173. package/js/i18n/locales/hr.js +13 -0
  174. package/js/i18n/locales/hu.js +18 -0
  175. package/js/i18n/locales/hy.js +18 -0
  176. package/js/i18n/locales/id.js +15 -0
  177. package/js/i18n/locales/is.js +14 -0
  178. package/js/i18n/locales/it-CH.js +20 -0
  179. package/js/i18n/locales/it.js +18 -0
  180. package/js/i18n/locales/ja.js +17 -0
  181. package/js/i18n/locales/ka.js +17 -0
  182. package/js/i18n/locales/kk.js +15 -0
  183. package/js/i18n/locales/km.js +15 -0
  184. package/js/i18n/locales/ko.js +18 -0
  185. package/js/i18n/locales/lt.js +19 -0
  186. package/js/i18n/locales/lv.js +18 -0
  187. package/js/i18n/locales/me.js +17 -0
  188. package/js/i18n/locales/mk.js +15 -0
  189. package/js/i18n/locales/mn.js +17 -0
  190. package/js/i18n/locales/mr.js +18 -0
  191. package/js/i18n/locales/ms.js +15 -0
  192. package/js/i18n/locales/nl-BE.js +18 -0
  193. package/js/i18n/locales/nl.js +18 -0
  194. package/js/i18n/locales/no.js +18 -0
  195. package/js/i18n/locales/oc.js +17 -0
  196. package/js/i18n/locales/pl.js +17 -0
  197. package/js/i18n/locales/pt-BR.js +17 -0
  198. package/js/i18n/locales/pt.js +18 -0
  199. package/js/i18n/locales/ro.js +17 -0
  200. package/js/i18n/locales/ru.js +18 -0
  201. package/js/i18n/locales/si.js +18 -0
  202. package/js/i18n/locales/sk.js +18 -0
  203. package/js/i18n/locales/sl.js +15 -0
  204. package/js/i18n/locales/sq.js +18 -0
  205. package/js/i18n/locales/sr-latn.js +16 -0
  206. package/js/i18n/locales/sr.js +16 -0
  207. package/js/i18n/locales/sv.js +17 -0
  208. package/js/i18n/locales/sw.js +15 -0
  209. package/js/i18n/locales/ta.js +18 -0
  210. package/js/i18n/locales/tg.js +19 -0
  211. package/js/i18n/locales/th.js +14 -0
  212. package/js/i18n/locales/tk.js +18 -0
  213. package/js/i18n/locales/tr.js +17 -0
  214. package/js/i18n/locales/uk.js +17 -0
  215. package/js/i18n/locales/uz-cyrl.js +18 -0
  216. package/js/i18n/locales/uz-latn.js +18 -0
  217. package/js/i18n/locales/vi.js +16 -0
  218. package/js/i18n/locales/zh-CN.js +19 -0
  219. package/js/i18n/locales/zh-TW.js +18 -0
  220. package/js/lib/date-format.js +185 -0
  221. package/js/lib/date.js +82 -0
  222. package/js/lib/dom.js +55 -0
  223. package/js/lib/event.js +68 -0
  224. package/js/lib/utils.js +61 -0
  225. package/js/main.js +4 -0
  226. package/js/options/defaultOptions.js +38 -0
  227. package/js/options/processOptions.js +263 -0
  228. package/js/picker/Picker.js +334 -0
  229. package/js/picker/templates/calendarWeeksTemplate.js +8 -0
  230. package/js/picker/templates/daysTemplate.js +8 -0
  231. package/js/picker/templates/pickerTemplate.js +23 -0
  232. package/js/picker/views/DaysView.js +250 -0
  233. package/js/picker/views/MonthsView.js +198 -0
  234. package/js/picker/views/View.js +55 -0
  235. package/js/picker/views/YearsView.js +170 -0
  236. package/package.json +81 -0
  237. package/postcss.config.js +5 -0
  238. package/rollup.config.js +75 -0
  239. package/sass/_mixins.scss +12 -0
  240. package/sass/datepicker-bs4.scss +91 -0
  241. package/sass/datepicker-bs5.scss +91 -0
  242. package/sass/datepicker-bulma.scss +69 -0
  243. package/sass/datepicker-foundation.scss +66 -0
  244. package/sass/datepicker.scss +436 -0
  245. package/sass/index-bs4.scss +5 -0
  246. package/sass/index-bs5.scss +5 -0
  247. package/sass/index-bulma.scss +6 -0
  248. package/sass/index-foundation.scss +3 -0
  249. package/scripts/build-css.js +39 -0
  250. package/scripts/build-locales.js +57 -0
  251. package/scripts/convert-bsdp-locales.js +65 -0
  252. package/scripts/minify-css.js +31 -0
  253. package/scripts/minify-js.js +17 -0
  254. package/style.css +10 -0
  255. package/tailwind.config.js +16 -0
  256. package/tailwind.css +1389 -0
  257. package/test/DateRangePicker/DateRangePicker.js +547 -0
  258. package/test/DateRangePicker/api-methods.js +415 -0
  259. package/test/DateRangePicker/date-selection.js +472 -0
  260. package/test/DateRangePicker/options.js +308 -0
  261. package/test/Datepicker/Datepicker-object.js +236 -0
  262. package/test/Datepicker/api-methods.js +328 -0
  263. package/test/_utils/date.js +102 -0
  264. package/test/_utils/dom.js +70 -0
  265. package/test/events.js +785 -0
  266. package/test/inline-mode.js +45 -0
  267. package/test/keyboard-operation/arrow-down.js +293 -0
  268. package/test/keyboard-operation/arrow-left.js +255 -0
  269. package/test/keyboard-operation/arrow-right.js +215 -0
  270. package/test/keyboard-operation/arrow-up.js +461 -0
  271. package/test/keyboard-operation/edit-mode.js +458 -0
  272. package/test/keyboard-operation/keyboard-operation.js +146 -0
  273. package/test/mouse-operation.js +580 -0
  274. package/test/options/before-show.js +635 -0
  275. package/test/options/bulma-datepicker.sublime-workspace +1280 -0
  276. package/test/options/buttons.js +383 -0
  277. package/test/options/date-restrictions.js +802 -0
  278. package/test/options/format.js +281 -0
  279. package/test/options/multidate.js +380 -0
  280. package/test/options/options.js +727 -0
  281. package/test/options/orientation.js +410 -0
  282. package/test/options/pick-levle+view.js +357 -0
  283. package/test/test.html +94 -0
  284. package/test/unit/DateRangePicker.js +192 -0
  285. package/test/unit/Datepicker.js +307 -0
  286. package/test/unit/_setup.js +28 -0
  287. package/test/unit/lib/date-format.js +310 -0
  288. package/test/unit/lib/date.js +211 -0
  289. package/test/unit/lib/dom.js +142 -0
  290. package/test/unit/lib/event.js +207 -0
  291. package/test/unit/lib/utils.js +135 -0
package/demo/index.html ADDED
@@ -0,0 +1,582 @@
1
+ <!DOCTYPE html>
2
+ <html class="">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Vanilla JS Datepicker Demo</title>
7
+ <link rel="stylesheet" href="./../dist/css/datepicker.min.css" />
8
+ <style type="text/css">
9
+ pre {
10
+ background-color: #f5f5f5;
11
+ padding: 1rem;
12
+ overflow-x: auto;
13
+ }
14
+ .section {
15
+ padding: 1.5rem;
16
+ }
17
+ .field {
18
+ margin-bottom: 1em;
19
+ }
20
+ .has-addons {
21
+ display: flex;
22
+ }
23
+ .has-addons .control a {
24
+ padding-left: 0.5rem;
25
+ padding-right: 0.5rem;
26
+ }
27
+ .label {
28
+ font-weight: 600;
29
+ }
30
+
31
+ aside {
32
+ position: fixed;
33
+ top: 0;
34
+ bottom: 0;
35
+ right: -300px;
36
+ width: 300px;
37
+ overflow: auto;
38
+ background-color: #fff;
39
+ box-shadow: inset 1px 1px rgba(0, 0, 0, 10%);
40
+ transition: right 0.3s;
41
+ }
42
+ .open aside {
43
+ right: 0;
44
+ }
45
+ aside hr {
46
+ margin-top: 0.5rem;
47
+ }
48
+ .code-wrap {
49
+ position: relative;
50
+ }
51
+ .code-wrap pre:not(.is-active) {
52
+ height: 0;
53
+ overflow: hidden;
54
+ opacity: 0.5;
55
+ }
56
+ .code-wrap .collapse-button {
57
+ position: absolute;
58
+ top: 0;
59
+ right: 0;
60
+ left: auto;
61
+ cursor: pointer;
62
+ padding: 0.125rem 0.25rem;
63
+ font-size: 0.75rem;
64
+ }
65
+ label.checkbox {
66
+ display: inline-block;
67
+ }
68
+ .help {
69
+ margin: 0;
70
+ }
71
+ .help.is-danger {
72
+ color: #f14668;
73
+ }
74
+
75
+ .toggle-btn {
76
+ position: fixed;
77
+ top: 0.75rem;
78
+ right: 0.75rem;
79
+ width: 1.5rem;
80
+ background-color: #fff;
81
+ line-height: 1.5rem;
82
+ border: 1px solid rgba(0, 0, 0, 10%);
83
+ border-radius: 2px;
84
+ box-shadow: 1px 1px rgba(0, 0, 0, 10%);
85
+ cursor: pointer;
86
+ }
87
+ .toggle-btn::before {
88
+ content: '\25c0';
89
+ padding-left: 0.25rem;
90
+ }
91
+ .open .toggle-btn::before {
92
+ content: '\25b6';
93
+ }
94
+
95
+ .has-background-info {
96
+ background-color: cyan;
97
+ }
98
+ .has-text-success {
99
+ color: green;
100
+ }
101
+
102
+ @media (min-width: 481px) {
103
+ main {
104
+ margin-right: 38.1966%;
105
+ }
106
+ aside {
107
+ right: 0;
108
+ width: 38.1966%;
109
+ }
110
+ .toggle-btn {
111
+ display: none;
112
+ }
113
+ }
114
+ </style>
115
+ </head>
116
+ <body class="dark:bg-neutral-primary">
117
+ <main>
118
+ <section class="container section is-fluid">
119
+ <div class="columns">
120
+ <div class="column">
121
+ <p>Vanilla JS Datepicker</p>
122
+ <h1 class="title">Demo</h1>
123
+ <div id="sandbox"></div>
124
+ </div>
125
+ </div>
126
+ <div class="columns">
127
+ <div class="column">
128
+ <p><small>Style: <a href="index.html">Bulma</a> | <a href="bs4.html">Bootstrap</a> | <a href="foundation.html">Foundation</a> | <em>Plain CSS</em></small></p>
129
+ <p><small>* This page uses <a href="https://wikiki.github.io/elements/tooltip/" target="_blank">bulma-tooltip</a> for tooltips.</small></p>
130
+ </div>
131
+ </div>
132
+ </section>
133
+ </main>
134
+
135
+ <aside>
136
+ <section class="section">
137
+ <div class="tile is-parent is-vertical">
138
+ <div class="tile is-child">
139
+ <h4 class="subtitle">Type</h4>
140
+ <form id="types">
141
+ <div class="field">
142
+ <div class="control">
143
+ <label class="radio">
144
+ <input type="radio" name="type" value="input" checked>
145
+ Input
146
+ </label>
147
+ <label class="radio">
148
+ <input type="radio" name="type" value="inline">
149
+ Inline
150
+ </label>
151
+ <label class="radio">
152
+ <input type="radio" name="type" value="range">
153
+ Range
154
+ </label>
155
+ </div>
156
+ </div>
157
+ </form>
158
+ </div>
159
+ <hr>
160
+ <div class="tile is-child">
161
+ <h4 class="subtitle">Options</h4>
162
+ <form id="options">
163
+
164
+ <div class="field">
165
+ <div class="control tooltip" data-tooltip="Only effective in range picker">
166
+ <label class="label checkbox">
167
+ <input type="checkbox" name="allowOneSidedRange" value="true">
168
+ allowOneSidedRange
169
+ </label>
170
+ </div>
171
+ </div>
172
+
173
+ <div class="field">
174
+ <div class="control">
175
+ <label class="label checkbox">
176
+ <input type="checkbox" name="autohide" value="true">
177
+ autohide
178
+ </label>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="field">
183
+ <div class="control">
184
+ <label class="label checkbox">
185
+ <input type="checkbox" name="beforeShowDay" value="true">
186
+ beforeShowDay
187
+ </label>
188
+ </div>
189
+ <div class="code-wrap">
190
+ <pre id="code-beforeShowDay"></pre>
191
+ <div class="collapse-button" data-target="code-beforeShowDay">show/hide</div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="field">
196
+ <div class="control">
197
+ <label class="label checkbox">
198
+ <input type="checkbox" name="beforeShowMonth" value="true">
199
+ beforeShowMonth
200
+ </label>
201
+ </div>
202
+ <div class="code-wrap">
203
+ <pre id="code-beforeShowMonth"></pre>
204
+ <div class="collapse-button" data-target="code-beforeShowMonth">show/hide</div>
205
+ </div>
206
+ </div>
207
+
208
+ <div class="field">
209
+ <div class="control">
210
+ <label class="label checkbox">
211
+ <input type="checkbox" name="beforeShowYear" value="true">
212
+ beforeShowYear
213
+ </label>
214
+ </div>
215
+ <div class="code-wrap">
216
+ <pre id="code-beforeShowYear"></pre>
217
+ <div class="collapse-button" data-target="code-beforeShowYear">show/hide</div>
218
+ </div>
219
+ </div>
220
+
221
+ <div class="field">
222
+ <div class="control">
223
+ <label class="label checkbox">
224
+ <input type="checkbox" name="beforeShowDecade" value="true">
225
+ beforeShowDecade
226
+ </label>
227
+ </div>
228
+ <div class="code-wrap">
229
+ <pre id="code-beforeShowDecade"></pre>
230
+ <div class="collapse-button" data-target="code-beforeShowDecade">show/hide</div>
231
+ </div>
232
+ </div>
233
+
234
+ <div class="field">
235
+ <div class="control">
236
+ <label class="label checkbox">
237
+ <input type="checkbox" name="calendarWeeks" value="true">
238
+ calendarWeeks
239
+ </label>
240
+ </div>
241
+ </div>
242
+
243
+ <div class="field">
244
+ <div class="control">
245
+ <label class="label checkbox">
246
+ <input type="checkbox" name="clearBtn" value="true">
247
+ clearBtn
248
+ </label>
249
+ </div>
250
+ </div>
251
+
252
+ <div class="field">
253
+ <label class="label">dateDelimiter</label>
254
+ <div class="control">
255
+ <input type="text" class="input" name="dateDelimiter" placeholder=",">
256
+ </div>
257
+ </div>
258
+
259
+ <div class="field">
260
+ <label class="label">datesDisabled</label>
261
+ <div class="control tooltip" data-tooltip="enter in JSON format">
262
+ <textarea class="input" name="datesDisabled" placeholder="[]"></textarea>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="field">
267
+ <label class="label">daysOfWeekDisabled</label>
268
+ <div class="control">
269
+ <label class="checkbox">
270
+ <input type="checkbox" name="daysOfWeekDisabled" value="0"> 0
271
+ </label>&nbsp;
272
+ <label class="checkbox">
273
+ <input type="checkbox" name="daysOfWeekDisabled" value="1"> 1
274
+ </label>&nbsp;
275
+ <label class="checkbox">
276
+ <input type="checkbox" name="daysOfWeekDisabled" value="2"> 2
277
+ </label>&nbsp;
278
+ <label class="checkbox">
279
+ <input type="checkbox" name="daysOfWeekDisabled" value="3"> 3
280
+ </label>&nbsp;
281
+ <label class="checkbox">
282
+ <input type="checkbox" name="daysOfWeekDisabled" value="4"> 4
283
+ </label>&nbsp;
284
+ <label class="checkbox">
285
+ <input type="checkbox" name="daysOfWeekDisabled" value="5"> 5
286
+ </label>&nbsp;
287
+ <label class="checkbox">
288
+ <input type="checkbox" name="daysOfWeekDisabled" value="6"> 6
289
+ </label>&nbsp;
290
+ </div>
291
+ </div>
292
+
293
+ <div class="field">
294
+ <label class="label">daysOfWeekHighlighted</label>
295
+ <div class="control">
296
+ <label class="checkbox">
297
+ <input type="checkbox" name="daysOfWeekHighlighted" value="0"> 0
298
+ </label>&nbsp;
299
+ <label class="checkbox">
300
+ <input type="checkbox" name="daysOfWeekHighlighted" value="1"> 1
301
+ </label>&nbsp;
302
+ <label class="checkbox">
303
+ <input type="checkbox" name="daysOfWeekHighlighted" value="2"> 2
304
+ </label>&nbsp;
305
+ <label class="checkbox">
306
+ <input type="checkbox" name="daysOfWeekHighlighted" value="3"> 3
307
+ </label>&nbsp;
308
+ <label class="checkbox">
309
+ <input type="checkbox" name="daysOfWeekHighlighted" value="4"> 4
310
+ </label>&nbsp;
311
+ <label class="checkbox">
312
+ <input type="checkbox" name="daysOfWeekHighlighted" value="5"> 5
313
+ </label>&nbsp;
314
+ <label class="checkbox">
315
+ <input type="checkbox" name="daysOfWeekHighlighted" value="6"> 6
316
+ </label>&nbsp;
317
+ </div>
318
+ </div>
319
+
320
+ <div class="field">
321
+ <label class="label">defaultViewDate</label>
322
+ <div class="control">
323
+ <input type="text" class="input" name="defaultViewDate" placeholder="today">
324
+ </div>
325
+ </div>
326
+
327
+ <div class="field">
328
+ <div class="control">
329
+ <label class="label checkbox">
330
+ <input type="checkbox" name="disableTouchKeyboard" value="true">
331
+ disableTouchKeyboard
332
+ </label>
333
+ </div>
334
+ </div>
335
+
336
+ <div class="field">
337
+ <label class="label">format</label>
338
+ <div class="control">
339
+ <input type="text" class="input" name="format" placeholder="mm/dd/yyyy">
340
+ </div>
341
+ </div>
342
+
343
+ <div class="field">
344
+ <label class="label">language</label>
345
+ <div class="control">
346
+ <div class="select">
347
+ <select name="language" >
348
+ <option value="en">en – English (US)</option>
349
+ </select>
350
+ </div>
351
+ </div>
352
+ </div>
353
+
354
+ <div class="field">
355
+ <label class="label">maxDate</label>
356
+ <div class="control">
357
+ <input type="text" class="input" name="maxDate" placeholder="null">
358
+ </div>
359
+ </div>
360
+
361
+ <div class="field">
362
+ <label class="label">maxNumberOfDates</label>
363
+ <div class="control tooltip" data-tooltip="Not effective in range picker">
364
+ <input type="text" class="input" name="maxNumberOfDates" placeholder="1">
365
+ </div>
366
+ </div>
367
+
368
+ <div class="field">
369
+ <label class="label">maxView</label>
370
+ <div class="control">
371
+ <div class="select">
372
+ <select name="maxView">
373
+ <option value="0">0 – days</option>
374
+ <option value="1">1 – months</option>
375
+ <option value="2">2 – years</option>
376
+ <option value="3" selected>3 – decades</option>
377
+ </select>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <div class="field">
383
+ <label class="label">minDate</label>
384
+ <div class="control">
385
+ <input type="text" class="input" name="minDate" placeholder="null">
386
+ </div>
387
+ </div>
388
+
389
+ <div class="field">
390
+ <label class="label">nextArrow</label>
391
+ <div class="control">
392
+ <textarea class="input" name="nextArrow" placeholder="»"></textarea>
393
+ </div>
394
+ </div>
395
+
396
+ <div class="field">
397
+ <label class="label">orientation</label>
398
+ <div class="control">
399
+ <div class="select">
400
+ <select name="orientation" >
401
+ <option value="auto">auto</option>
402
+ <option value="top auto">top auto</option>
403
+ <option value="bottom auto">bottom auto</option>
404
+ <option value="auto left">auto left</option>
405
+ <option value="top left">top left</option>
406
+ <option value="bottom left">bottom left</option>
407
+ <option value="auto right">auto right</option>
408
+ <option value="top right">top right</option>
409
+ <option value="bottom right">bottom right</option>
410
+ </select>
411
+ </div>
412
+ </div>
413
+ </div>
414
+
415
+ <div class="field">
416
+ <label class="label">pickLevel</label>
417
+ <div class="control">
418
+ <div class="select">
419
+ <select name="pickLevel">
420
+ <option value="0">0 – date</option>
421
+ <option value="1">1 – month</option>
422
+ <option value="2">2 – year</option>
423
+ </select>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <div class="field">
429
+ <label class="label">prevArrow</label>
430
+ <div class="control">
431
+ <textarea class="input" name="prevArrow" placeholder="«"></textarea>
432
+ </div>
433
+ </div>
434
+
435
+ <div class="field">
436
+ <div class="control">
437
+ <label class="label checkbox">
438
+ <input type="checkbox" name="showDaysOfWeek" value="true" checked>
439
+ showDaysOfWeek
440
+ </label>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="field">
445
+ <div class="control">
446
+ <label class="label checkbox">
447
+ <input type="checkbox" name="showOnClick" value="true" checked>
448
+ showOnClick
449
+ </label>
450
+ </div>
451
+ </div>
452
+
453
+ <div class="field">
454
+ <div class="control">
455
+ <label class="label checkbox">
456
+ <input type="checkbox" name="showOnFocus" value="true" checked>
457
+ showOnFocus
458
+ </label>
459
+ </div>
460
+ </div>
461
+
462
+ <div class="field">
463
+ <label class="label">startView</label>
464
+ <div class="control">
465
+ <div class="select">
466
+ <select name="startView">
467
+ <option value="0">0 – days</option>
468
+ <option value="1">1 – months</option>
469
+ <option value="2">2 – years</option>
470
+ <option value="3">3 – decades</option>
471
+ </select>
472
+ </div>
473
+ </div>
474
+ </div>
475
+
476
+ <div class="field">
477
+ <label class="label">title</label>
478
+ <div class="control">
479
+ <input type="text" class="input" name="title">
480
+ </div>
481
+ </div>
482
+
483
+ <div class="field">
484
+ <div class="control">
485
+ <label class="label checkbox">
486
+ <input type="checkbox" name="todayBtn" value="true">
487
+ todayBtn
488
+ </label>
489
+ </div>
490
+ </div>
491
+
492
+ <div class="field">
493
+ <label class="label">todayBtnMode</label>
494
+ <div class="control">
495
+ <div class="select">
496
+ <select name="todayBtnMode">
497
+ <option value="0">0 – focus</option>
498
+ <option value="1">1 – select</option>
499
+ </select>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="field">
505
+ <div class="control">
506
+ <label class="label checkbox">
507
+ <input type="checkbox" name="todayHighlight" value="true">
508
+ todayHighlight
509
+ </label>
510
+ </div>
511
+ </div>
512
+
513
+ <div class="field">
514
+ <div class="control">
515
+ <label class="label checkbox">
516
+ <input type="checkbox" name="updateOnBlur" value="true" checked>
517
+ updateOnBlur
518
+ </label>
519
+ </div>
520
+ </div>
521
+
522
+ <div class="field">
523
+ <label class="label">weekStart</label>
524
+ <div class="control">
525
+ <input type="text" class="input" name="weekStart" placeholder="0">
526
+ </div>
527
+ </div>
528
+
529
+ </form>
530
+ </div>
531
+ <hr>
532
+ <div class="tile is-child">
533
+ <h4 class="subtitle">Text direction</h4>
534
+ <form id="direction">
535
+ <div class="field">
536
+ <div class="control">
537
+ <label class="radio">
538
+ <input type="radio" name="direction" value="ltr" checked>
539
+ LTR
540
+ </label>
541
+ <label class="radio">
542
+ <input type="radio" name="direction" value="rtl">
543
+ RTL
544
+ </label>
545
+ </div>
546
+ </div>
547
+ </form>
548
+ </div>
549
+ </div>
550
+ </section>
551
+ </aside>
552
+
553
+ <div class="toggle-btn"></div>
554
+ <script src="../dist/main.umd.js"></script>
555
+ <script src="./live-demo.js"></script>
556
+ <script>
557
+ /*global initialize onChangeType onChnageDirection onChangeInputOption onChangeInputOption onChangeTextareaOption onClickCheckboxOptions switchPicker */
558
+ initialize();
559
+
560
+ document.getElementById('types').querySelectorAll('input').forEach((el) => {
561
+ el.addEventListener('change', onChangeType);
562
+ });
563
+
564
+ document.getElementById('direction').querySelectorAll('input').forEach((el) => {
565
+ el.addEventListener('change', onChnageDirection);
566
+ });
567
+
568
+ const optsForm = document.getElementById('options');
569
+ optsForm.querySelectorAll('input[type=text], input[type=radio], select').forEach((el) => {
570
+ el.addEventListener('change', onChangeInputOption);
571
+ });
572
+ optsForm.querySelectorAll('textarea').forEach((el) => {
573
+ el.addEventListener('change', onChangeTextareaOption);
574
+ });
575
+ optsForm.querySelectorAll('.checkbox').forEach((el) => {
576
+ el.addEventListener('click', onClickCheckboxOptions);
577
+ });
578
+
579
+ switchPicker('input');
580
+ </script>
581
+ </body>
582
+ </html>