Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Apply strict month & year selection limits. #317

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

Apply strict month & year selection limits. #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,9 @@ The default value for this object is:

```js
{
date: {
strictDateLimits: false;
},
time: {
nearestIfDisabled: true;
}
Expand All @@ -243,6 +246,7 @@ To override those values, pass a new object with the values you want to override

| Behaviour | Description | Type | Default |
| ---------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- |
| date.strictDateLimits | When `true`, selection of months and years will be disabled outside of any supplied limits (`min-date` – `max-date`). Set to `false`, all months and years will be selectable, even if all days are out of range. | Boolean | false |
| time.nearestIfDisabled | If `true`, it will select the nearest available hour in the timepicker, if the current selected hour is disabled. Per example, if the hour is 12 but all the hours have been disabled until 14, then the 14 will be selected by default. Set `false` to disable this behaviour; the current hour will remain selected even if it has been disabled. The user cannot re-select it. | Boolean | true |

# Events API
Expand Down
18 changes: 12 additions & 6 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,6 +221,11 @@
:disabled-weekly="demo.options.disabledWeekly"
:right="demo.options.right"
:no-clear-button="demo.options.noClearButton"
:behaviour="{
date: {
strictDateLimits: demo.options.strictDateLimits
}
}"
>
<input
v-if="demo.options && demo.options.slot && demo.options.slot.type === 'input'"
Expand Down Expand Up @@ -256,7 +261,7 @@
booleanOptions: [
'noHeader', 'autoClose', 'error', 'dark', 'overlay', 'noWeekendDays', 'noShortcuts',
'noButton', 'onlyDate', 'range', 'onlyTime', 'inline', 'persistent', 'disabled', 'noButtonNow', 'noValueToCustomElem',
'noKeyboard', 'right', 'noClearButton', 'noLabel'
'noKeyboard', 'right', 'noClearButton', 'noLabel', 'strictDateLimits'
],
stringOptions: [
'id', 'label', 'hint', 'color', 'buttonColor', 'position', 'format', 'formatted', 'outputFormat',
Expand Down Expand Up @@ -385,16 +390,17 @@
},
{
id: '7',
title: 'Min and Max date with time in 24h-format',
description: 'minDate: 2019-03-03 20:10, maxDate: 2019-06-24 09:14',
title: 'Strict Min and Max date with time in 24h-format',
description: 'minDate: 2010-03-03 20:10, maxDate: 2022-06-24 09:14',
initial: '2019-03-04 20:26',
value: '2019-03-04 20:26',
editOption: false,
options: {
format: 'YYYY-MM-DD HH:mm',
id: 'DateTimePicker',
minDate: '2019-03-03 20:10',
maxDate: '2019-06-24 09:14'
minDate: '2010-03-03 20:10',
maxDate: '2022-06-24 09:14',
strictDateLimits: true
}
},
{
Expand All @@ -408,7 +414,7 @@
format: 'YYYY-MM-DD h:mm a',
id: 'DateTimePicker',
minDate: '2019-03-03 8:10 pm',
maxDate: '2019-03-24 9:14 am'
maxDate: '2019-06-24 9:14 am'
}
},
{
Expand Down
12 changes: 9 additions & 3 deletions src/VueCtkDateTimePicker/_subs/CustomButton/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@
'with-border': withBorder,
'is-hover': hover,
'is-selected': selected,
'is-disabled': disabled,
'round': round
}"
:disabled="disabled"
tabindex="-1"
type="button"
@click.stop="$emit('click')"
Expand Down Expand Up @@ -38,14 +40,18 @@
withBorder: { type: Boolean, default: false },
hover: { type: Boolean, default: false },
selected: { type: Boolean, default: false },
disabled: { type: Boolean, default: false },
round: { type: Boolean, default: false }
},
computed: {
colorStyle () {
const color = this.dark ? 'white' : this.color
const color = this.dark ? 'white'
: this.disabled ? '#424242'
: this.color
return {
color: color,
fill: color
fill: color,
opacity: this.disabled ? 0.5 : 1
}
},
bgStyle () {
Expand Down Expand Up @@ -97,7 +103,7 @@
&.with-border {
border: 1px solid #eaeaea;
}
&:hover, &.is-hover {
&:hover:enabled, &.is-hover {
border: 1px solid transparent !important;
.custom-button-effect {
transform: scale(1);
Expand Down
35 changes: 35 additions & 0 deletions src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/_subs/YearMonthSelector.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
:key="index"
:color="color"
:selected="currentMonth === index"
:disabled="strictLimits && isMonthDisabled(index)"
:dark="dark"
class="month-button"
with-border
Expand All @@ -34,6 +35,7 @@
:color="color"
:dark="dark"
:selected="currentYear === year"
:disabled="strictLimits && isYearDisabled(year)"
with-border
@click="selectYear(year)"
>
Expand All @@ -44,6 +46,7 @@
</template>

<script>
import moment from 'moment'
import { getMonthsShort } from '@/VueCtkDateTimePicker/modules/month'
import CustomButton from '@/VueCtkDateTimePicker/_subs/CustomButton'

Expand All @@ -64,6 +67,9 @@
dark: { type: Boolean, default: null },
color: { type: String, default: null },
mode: { type: String, default: null },
minDate: { type: String, default: null },
maxDate: { type: String, default: null },
strictLimits: { type: Boolean, default: false },
month: { type: Object, default: null }
},
data () {
Expand All @@ -81,6 +87,12 @@
},
isMonthMode () {
return this.mode === 'month'
},
minYear () {
return this.minDate && moment(this.minDate, 'YYYY-MM-DD').year()
},
maxYear () {
return this.maxDate && moment(this.maxDate, 'YYYY-MM-DD').year()
}
},
mounted () {
Expand All @@ -91,6 +103,29 @@
}
},
methods: {
isYearDisabled (year) {
return (this.minDate && this.isBeforeMinYear(year)) ||
(this.minDate && this.isAfterMaxYear(year))
},
isBeforeMinYear (year) {
return year < this.minYear
},
isAfterMaxYear (year) {
return year > this.maxYear
},
isMonthDisabled (month) {
return !this.currentYear ||
(this.minDate && this.isBeforeMinMonth(this.currentYear, month)) ||
(this.minDate && this.isAfterMaxMonth(this.currentYear, month))
},
isBeforeMinMonth (year, month) {
return this.isBeforeMinYear(year) ||
(year === this.minYear && month < moment(this.minDate, 'YYYY-MM-DD').month())
},
isAfterMaxMonth (year, month) {
return this.isAfterMaxYear(year) ||
(year === this.maxYear && month > moment(this.maxDate, 'YYYY-MM-DD').month())
},
getMonths () {
this.years = null
this.months = getMonthsShort(this.locale)
Expand Down
9 changes: 8 additions & 1 deletion src/VueCtkDateTimePicker/_subs/PickersContainer/_subs/DatePicker/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,9 @@
:dark="dark"
:mode="selectingYearMonth"
:month="month"
:min-date="minDate"
:max-date="maxDate"
:strict-limits="strictDateLimits"
@input="selectYearMonth"
@back="selectingYearMonth = null"
/>
Expand Down Expand Up @@ -185,7 +188,8 @@
noShortcuts: { type: Boolean, default: null },
firstDayOfWeek: { type: Number, default: null },
customShortcuts: { type: Array, default: () => ([]) },
visible: { type: Boolean, default: null }
visible: { type: Boolean, default: null },
behaviour: { type: Object, default: () => ({}) }
},
data () {
return {
Expand Down Expand Up @@ -220,6 +224,9 @@
},
weekDays () {
return getWeekDays(this.locale, this.firstDayOfWeek)
},
strictDateLimits () {
return this.behaviour && this.behaviour.date && this.behaviour.date.strictDateLimits
}
},
methods: {
Expand Down
1 change: 1 addition & 0 deletions src/VueCtkDateTimePicker/_subs/PickersContainer/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
:custom-shortcuts="customShortcuts"
:no-keyboard="noKeyboard"
:locale="locale"
:behaviour="behaviour"
@change-month="changeMonth"
@change-year-month="changeYearMonth"
@close="$emit('close')"
Expand Down
9 changes: 8 additions & 1 deletion src/VueCtkDateTimePicker/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,9 @@
* @const defaultBehaviour
*/
const defaultBehaviour = {
date: {
strictDateLimits: false
},
time: {
nearestIfDisabled: true
}
Expand Down Expand Up @@ -199,9 +202,13 @@
* @returns {Object}
*/
_behaviour () {
const { time } = defaultBehaviour
const { date, time } = defaultBehaviour

return {
date: {
...date,
...this.behaviour.date
},
time: {
...time,
...this.behaviour.time
Expand Down