diff --git a/docs/src/examples/QDate/DaySlot.vue b/docs/src/examples/QDate/DaySlot.vue new file mode 100644 index 000000000000..9f035c4d24c0 --- /dev/null +++ b/docs/src/examples/QDate/DaySlot.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/docs/src/examples/QDate/Input.vue b/docs/src/examples/QDate/Input.vue index 9c12a7bea395..0b0b6376af9e 100644 --- a/docs/src/examples/QDate/Input.vue +++ b/docs/src/examples/QDate/Input.vue @@ -3,12 +3,8 @@ diff --git a/docs/src/examples/QDate/IntervalSelection.vue b/docs/src/examples/QDate/IntervalSelection.vue new file mode 100644 index 000000000000..04df2cde474e --- /dev/null +++ b/docs/src/examples/QDate/IntervalSelection.vue @@ -0,0 +1,124 @@ + + + diff --git a/docs/src/examples/QDate/IntervalSelectionConstrained.vue b/docs/src/examples/QDate/IntervalSelectionConstrained.vue new file mode 100644 index 000000000000..f137e7125cbb --- /dev/null +++ b/docs/src/examples/QDate/IntervalSelectionConstrained.vue @@ -0,0 +1,167 @@ + + + diff --git a/docs/src/examples/QDate/WeekSelection.vue b/docs/src/examples/QDate/WeekSelection.vue new file mode 100644 index 000000000000..fe1ac04e44f1 --- /dev/null +++ b/docs/src/examples/QDate/WeekSelection.vue @@ -0,0 +1,39 @@ + + + diff --git a/docs/src/examples/QTime/Input.vue b/docs/src/examples/QTime/Input.vue index 056567f0c199..593819c6f673 100644 --- a/docs/src/examples/QTime/Input.vue +++ b/docs/src/examples/QTime/Input.vue @@ -23,11 +23,7 @@ v-model="timeWithSeconds" with-seconds format24h - > -
- -
- + /> diff --git a/docs/src/pages/quasar-utils/date-utils.md b/docs/src/pages/quasar-utils/date-utils.md index 0e369b823804..7474c6a6b5be 100644 --- a/docs/src/pages/quasar-utils/date-utils.md +++ b/docs/src/pages/quasar-utils/date-utils.md @@ -308,7 +308,7 @@ const newDate = new Date(2017, 1, 4) const day = date.getDayOfYear(newDate) // `day` is 35 ``` -To get the day number in week for a given date object use: +To get the day number in week for a given date object use (1-based, starting with firstDayOfWeek from locale): ```js import { date } from 'quasar' diff --git a/docs/src/pages/vue-components/date.md b/docs/src/pages/vue-components/date.md index 794d1fae1ca1..720947504e82 100644 --- a/docs/src/pages/vue-components/date.md +++ b/docs/src/pages/vue-components/date.md @@ -47,7 +47,7 @@ Notice in the examples below that the model is an Object (single selection) or a ::: tip TIPS * Clicking on an already selected day will deselect it. * The user's current editing range can also be set programmatic through the `setEditingRange` method (check the API card). -* There are two useful events in regards to the current editing range: `range-start` and `range-end` (check the API card). +* There are three useful events in regards to the current editing range: `range-start`, `range-change` and `range-end` (check the API card). ::: ::: warning @@ -58,6 +58,18 @@ The `range` property is only partially compatible with the `options` prop: selec +* Use 2 components to allow easy interval selection + + + +* Adjust the selection to match a fixed interval + + + +* Limit the minimum and maximum selection length + + + ### Custom title and subtitle When not in 'minimal' mode, QDate has a computed header title and subtitle. You can override it, like in the example below. @@ -134,6 +146,12 @@ The first example is using an array and the second example is using a function. +### Day scoped slot + +You can use the `day` scoped slot to render custom event markers or tooltips specific to each day. + + + ### Limiting options * You can use the `options` prop to limit user selection to certain times. diff --git a/ui/dev/src/pages/form/date-day-slot.vue b/ui/dev/src/pages/form/date-day-slot.vue new file mode 100644 index 000000000000..bf6c7f7fc7b0 --- /dev/null +++ b/ui/dev/src/pages/form/date-day-slot.vue @@ -0,0 +1,111 @@ + + + + + diff --git a/ui/dev/src/pages/form/date-interval-selection-constrained.vue b/ui/dev/src/pages/form/date-interval-selection-constrained.vue new file mode 100644 index 000000000000..f137e7125cbb --- /dev/null +++ b/ui/dev/src/pages/form/date-interval-selection-constrained.vue @@ -0,0 +1,167 @@ + + + diff --git a/ui/dev/src/pages/form/date-interval-selection.vue b/ui/dev/src/pages/form/date-interval-selection.vue new file mode 100644 index 000000000000..04df2cde474e --- /dev/null +++ b/ui/dev/src/pages/form/date-interval-selection.vue @@ -0,0 +1,124 @@ + + + diff --git a/ui/dev/src/pages/form/date-part1-basic.vue b/ui/dev/src/pages/form/date-part1-basic.vue index 51e53a00690e..51629690072b 100644 --- a/ui/dev/src/pages/form/date-part1-basic.vue +++ b/ui/dev/src/pages/form/date-part1-basic.vue @@ -22,8 +22,8 @@ :style="style" @input="inputLog" flat bordered - navigation-min-year-month="2018/05" - navigation-max-year-month="2019/03" + :navigation-min-year-month="navigationMinYM" + :navigation-max-year-month="navigationMaxYM" >
@@ -135,25 +135,61 @@
- Limited options + Day slot
+ + +
+ +
+ Limited options +
+
+ @@ -353,6 +388,43 @@
+ + diff --git a/ui/dev/src/pages/other/date-utils.vue b/ui/dev/src/pages/other/date-utils.vue index 9f2b705f0275..0dfd9526f867 100644 --- a/ui/dev/src/pages/other/date-utils.vue +++ b/ui/dev/src/pages/other/date-utils.vue @@ -1,34 +1,35 @@