feat: added dayFormat prop

Co-Authored-by: Nerijus Gaidjurgis <[email protected]>
icehaunter · Jun 4, 2023 · e567369 · e567369
1 parent f8fc91d
commit e567369
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -52,6 +52,7 @@ Full props documentation is available at https://icehaunter.github.io/vue3-datep
 | `startingView`           | `'time' \| 'day' \| 'month' \| 'year'`                   | `'day'`              | View on which the date picker should open. Can be either `year`, `month`, or `day`                                                         |
 | `minimumView`            | `'time' \| 'day' \| 'month' \| 'year'`                   | `'day'`              | If set, lower-level views won't show                                                                                                       |
 | `dayPickerHeadingFormat` | `String`                                                 | `LLLL yyyy`          | `date-fns`-type formatting for a day view heading                                                                                          |
+| `dayFormat`              | `String`                                                 | `dd`                 | `date-fns`-type formatting for each day on the day view                                                                                    |
 | `weekdayFormat`          | `String`                                                 | `EE`                 | `date-fns`-type formatting for a line of weekdays on day view                                                                              |
 | `inputFormat`            | `String`                                                 | `yyyy-MM-dd`         | `date-fns`-type format in which the string in the input should be both parsed and displayed                                                |
 | `locale`                 | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |

diff --git a/docs/config.md b/docs/config.md
@@ -67,6 +67,13 @@ View on which the date picker should open. Can be either `year`, `month`, `day`
 
 `date-fns`-type formatting for a line of weekdays on day view. By default uses three-letter representation (e.g. Fri).
 
+### `dayFormat`
+
+- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))
+- Default: `dd`
+
+`date-fns`-type formatting for the day picker view.
+
 ### `inputFormat`
 
 - Type: `String` (date-fns [format string](https://date-fns.org/docs/format))

diff --git a/docs/index.md b/docs/index.md
@@ -65,6 +65,7 @@ More in-depth documentation of the props, as well as examples, can be found in [
 | `startingView`           | `'time' \| `'day' \| 'month' \| 'year'`                  | `'day'`              | View on which the date picker should open. Can be either `year`, `month`, or `day`                                                         |
 | `minimumView`            | `'time' \| `'day' \| 'month' \| 'year'`                  | `'day'`              | If set, lower-level views won't show                                                                                                       |
 | `dayPickerHeadingFormat` | `String`                                                 | `LLLL yyyy`          | `date-fns`-type formatting for a day view heading                                                                                          |
+| `dayFormat`              | `String`                                                 | `dd`                 | `date-fns`-type formatting for each day on the day view                                                                                    |
 | `weekdayFormat`          | `String`                                                 | `EE`                 | `date-fns`-type formatting for a line of weekdays on day view                                                                              |
 | `inputFormat`            | `String`                                                 | `yyyy-MM-dd`         | `date-fns`-type format in which the string in the input should be both parsed and displayed                                                |
 | `locale`                 | [`Locale`](https://date-fns.org/v2.16.1/docs/I18n#usage) | `date-fns/locale/en` | [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage). Used in string formatting (see default `dayPickerHeadingFormat`) |

diff --git a/src/App.vue b/src/App.vue
@@ -10,6 +10,7 @@
       :upperLimit="to"
       :lowerLimit="from"
       :clearable="true"
+      dayFormat="d"
       :disabledDates="{ predicate: isToday }"
     >
       <template v-slot:clear="{ onClear }">

diff --git a/src/datepicker/Datepicker.vue b/src/datepicker/Datepicker.vue
@@ -55,6 +55,7 @@
       :locale="locale"
       :weekdayFormat="weekdayFormat"
       :allow-outside-interval="allowOutsideInterval"
+      :format="dayFormat"
       @select="selectDay"
       @back="viewShown = 'month'"
     />
@@ -196,6 +197,14 @@ export default defineComponent({
       required: false,
       default: 'EE',
     },
+    /**
+     * `date-fns`-type formatting for the day picker view
+     */
+    dayFormat: {
+      type: String,
+      required: false,
+      default: 'dd',
+    },
     /**
      * `date-fns`-type format in which the string in the input should be both
      * parsed and displayed