Skip to content

Commit

Permalink
fix: allow header in the day picker to be customized
Browse files Browse the repository at this point in the history 
Closes #50, #85
  • Loading branch information
@icehaunter
icehaunter committed Oct 10, 2022
1 parent ac82141 commit afa7b08
Show file tree
Hide file tree
Showing 4 changed files with 9 additions and 9 deletions.
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@ Full props documentation is available at https://icehaunter.github.io/vue3-datep
| `disabledTime` | `{ dates: Date[] }` | | Dates not available for time picking |
| `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 |
| `monthHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading |
| `dayPickerHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading |
| `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 `monthHeadingFormat`) |
| `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`) |
| `disabled` | `Boolean` | `false` | Disables datepicker and prevents it's opening |
| `typeable` | `Boolean` | `false` | Allows user to input date manually |
| `weekStartsOn` | `Number` | 1 | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default |
Expand Down
4 changes: 2 additions & 2 deletions docs/config.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ tests each date in the timepicker view, returning `true` if date should be disab

View on which the date picker should open. Can be either `year`, `month`, `day` or `time`. If `startingView` is `time` and `minimumView` is `time` then only view of the calendar `time` will be available.

### `monthHeadingFormat`
### `dayPickerHeadingFormat`

- Type: `String` (date-fns [format string](https://date-fns.org/docs/format))
- Default: `LLLL yyyy`
Expand All @@ -72,7 +72,7 @@ View on which the date picker should open. Can be either `year`, `month`, `day`
- Type: `Locale` [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage)
- Default: `date-fns/locale/en`

Used in all date string formatting (e.g. see default `monthHeadingFormat`)
Used in all date string formatting (e.g. see default `dayPickerHeadingFormat`)

### `weekStartsOn`

Expand Down
4 changes: 2 additions & 2 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ More in-depth documentation of the props, as well as examples, can be found in [
| `disabledTime` | `{ dates: Date[] }` | | Dates not available for time picking |
| `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 |
| `monthHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading |
| `dayPickerHeadingFormat` | `String` | `LLLL yyyy` | `date-fns`-type formatting for a month view heading |
| `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 `monthHeadingFormat`) |
| `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`) |
| `disabled` | `Boolean` | `false` | Disables datepicker and prevents it's opening |
| `typeable` | `Boolean` | `false` | Allows user to input date manually |
| `weekStartsOn` | `Number` | 1 | Day on which the week should start. Number from 0 to 6, where 0 is Sunday and 6 is Saturday. Week starts with a Monday (1) by default |
Expand Down
6 changes: 3 additions & 3 deletions src/datepicker/Datepicker.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
:lowerLimit="lowerLimit"
:upperLimit="upperLimit"
:format="monthListFormat"
:headingFormat="monthHeadingFormat"
:headingFormat="dayPickerHeadingFormat"
:locale="locale"
@back="viewShown = 'year'"
/>
Expand Down Expand Up @@ -143,7 +143,7 @@ export default defineComponent({
/**
* `date-fns`-type formatting for a month view heading
*/
monthHeadingFormat: {
dayPickerHeadingFormat: {
type: String,
required: false,
default: 'LLLL yyyy',
Expand Down Expand Up @@ -175,7 +175,7 @@ export default defineComponent({
},
/**
* [`date-fns` locale object](https://date-fns.org/v2.16.1/docs/I18n#usage).
* Used in string formatting (see default `monthHeadingFormat`)
* Used in string formatting (see default `dayPickerHeadingFormat`)
*/
locale: {
type: Object as PropType<Locale>,
Expand Down

0 comments on commit afa7b08

Please sign in to comment.