feat(Calendar, DatePicker, DateRangePicker, TimePicker): add keyboard…

… support, improve syntax
coreui · Oct 19, 2023 · 5af7c3d · 5af7c3d
1 parent 949481b
commit 5af7c3d
Show file tree

Hide file tree

Showing 7 changed files with 436 additions and 198 deletions.
diff --git a/docs/assets/js/snippets.js b/docs/assets/js/snippets.js
@@ -322,8 +322,8 @@
     const optionsDatePickerCustomFormats1 = {
       locale: 'en-US',
       date: new Date(2022, 8, 3),
-      inputDateFormat: date => dayjs(date).format('MMMM DD, YYYY'),
-      inputDateParse: date => dayjs(date, 'MMMM DD, YYYY').toDate()
+      inputDateFormat: date => dayjs(date).locale('en').format('MMMM DD, YYYY'),
+      inputDateParse: date => dayjs(date, 'MMMM DD, YYYY', 'en').toDate()
     }
 
     new coreui.DatePicker(myDatePickerCustomFormats1, optionsDatePickerCustomFormats1)
@@ -338,8 +338,8 @@
     const optionsDatePickerCustomFormats2 = {
       locale: 'es-ES',
       date: new Date(2022, 8, 3),
-      inputDateFormat: date => dayjs(date).format('YYYY MMMM DD'),
-      inputDateParse: date => dayjs(date, 'YYYY MMMM DD').toDate()
+      inputDateFormat: date => dayjs(date).locale('es').format('YYYY MMMM DD'),
+      inputDateParse: date => dayjs(date, 'YYYY MMMM DD', 'es').toDate()
     }
 
     new coreui.DatePicker(myDatePickerCustomFormats2, optionsDatePickerCustomFormats2)
@@ -379,8 +379,8 @@
       locale: 'en-US',
       startDate: new Date(2022, 8, 3),
       endDate: new Date(2022, 8, 17),
-      inputDateFormat: date => dayjs(date).format('MMMM DD, YYYY'),
-      inputDateParse: date => dayjs(date, 'MMMM DD, YYYY').toDate()
+      inputDateFormat: date => dayjs(date).locale('en').format('MMMM DD, YYYY'),
+      inputDateParse: date => dayjs(date, 'MMMM DD, YYYY', 'en').toDate()
     }
 
     new coreui.DateRangePicker(myDateRangePickerCustomFormats1, optionsDateRangePickerCustomFormats1)
@@ -396,8 +396,8 @@
       locale: 'es-ES',
       startDate: new Date(2022, 8, 3),
       endDate: new Date(2022, 8, 17),
-      inputDateFormat: date => dayjs(date).format('YYYY MMMM DD'),
-      inputDateParse: date => dayjs(date, 'YYYY MMMM DD').toDate()
+      inputDateFormat: date => dayjs(date).locale('es').format('YYYY MMMM DD'),
+      inputDateParse: date => dayjs(date, 'YYYY MMMM DD', 'es').toDate()
     }
 
     new coreui.DateRangePicker(myDateRangePickerCustomFormats2, optionsDateRangePickerCustomFormats2)

diff --git a/docs/content/forms/date-picker.md b/docs/content/forms/date-picker.md
@@ -257,6 +257,7 @@ The `inputDateFormat` property formats the date into a custom string, while the
 ```html
 <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/en.js"></script>
 ```
 
 {{< js-docs name="date-picker-custom-formats1" file="docs/assets/js/snippets.js" >}}

diff --git a/docs/layouts/partials/scripts.html b/docs/layouts/partials/scripts.html
@@ -11,6 +11,7 @@
 {{- if eq .Params.dayjs true -}}
 <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/en.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/es.js"></script>
 {{- end }}