vue2-datepicker
vue2-datepicker copied to clipboard
mengxiong10
[Feature request] Min/Max date ranges that disable arrows, hide invalid months/years.
The disabledDate API works great for discrete ranges of date, but it would be nice to be able to disable dates in such a way that next/previous arrows are also disabled, and to hide invalid months or years in the date picker that fall outside of the range.
For example: When entering birthdate, dates in the future may not be needed. When scheduling an appointment, dates in the past may not be needed.
Ideally, setting a maxDate to new Date() would:
- Disable the rest of days in the current month
- Disable the next / double next arrows
- Hide future months in the month picker
- Hide future years in the year picker
Agree. The ability to disable or hide both future and past invalid dates would be a great addition.
This is related to #380 ([Bug] When disabled-date is specified, we can still select Year and Month)
any plans to implement this? it would be really nice to have this feature
@mengxiong10 , will the PR be merged any time soon? i would love to use this feature ;)
I add disabledCalendarChanger in v3.11.0
Simple 🔽
<template>
<date-picker :disabled-date="disabledDate" :disabled-calendar-changer="disabledDate" />
</template>
<script>
export default {
methods: {
disabledDate(date) {
const today = new Date().setHours(0, 0, 0, 0)
return date < new Date(today);
},
},
};
</script>
Advance🔽
<template>
<date-picker :disabled-date="disabledDate" :disabled-calendar-changer="disabledCalendarChanger" />
</template>
<script>
export default {
methods: {
disabledDate(date) {
const today = new Date().setHours(0, 0, 0, 0)
return date < new Date(today);
},
disabledCalendarChanger(date, type) {
// type: last-year , last-month, next-year, next-month, last-decade, next-decade, year, month
if (type === 'year' || type === 'month') {
return false
}
return this.disabledDate(date)
}
},
};
</script>
This feature is good, but we found some quirks with the result. If dates are disabled in future, but the current value is long time in the past (in my example 2020-10-01) arrows do not work in neither direction and all dates in current month are disabled as well.
I found two ways to resolve it finall:
- to clear the date first
- click on the year and select it in the future. Hence it still confusing since I cannot select the current year (2023 is the closest option for some reason)
I made a fiddle to explain it: https://jsfiddle.net/m17qnayv/1
While it may be logical, but a bit confusing for regular users and even for me ;). So maybe it could be possible to let the selector arrows work, but fast-forward to the closest suitable period?
