vue-datetime
vue-datetime copied to clipboard
Min Time and Max Time
I'm using this library implemented with a calendar, I'd like to limit the time that the user can select, for example a business hour, from 06:00 to 20:00
It would be great
Thank you for the amazing library
I am expecting the same feature. Please help us.
@soyjonathanespinosa maybe I can help you, I made this manual code to disable the minutes to limite from 06:00 to 20:00
first and simple, with css you can disable the hours like this
.vdatetime-time-picker__list--hours {
.vdatetime-time-picker__item:nth-child(-n + 6) {
display: none;
}
.vdatetime-time-picker__item:nth-last-child(-n + 3) {
display: none;
}
}
but the minutes are dynamic, so if the user select the hour 20, you need to hide all the minutes except the 00, you can do it with this code
This code was made in vuejs, and the first section where I test if this.$refs.timeStart.isOpen
is for multiples inputs, I need to know each input are open so it doesnt throws an error, you may need adapt to your code
document.body.addEventListener('click', (e) => {
if (e.target.closest('.vdatetime-time-picker__item') && e.target.closest('.vdatetime-time-picker__list--hours') || e.target.closest('.vdatetime')) {
let dateTimeComponent
if (this.$refs.timeStart.isOpen) {
dateTimeComponent = this.$refs.timeStart
} else if (this.$refs.timeEnd.isOpen) {
dateTimeComponent = this.$refs.timeEnd
}
let selected = document.querySelector('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item.vdatetime-time-picker__item--selected')
if (selected) {
let hour = selected.innerText;
if (document.querySelector('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item')) {
if (hour == '20') {
document.querySelectorAll('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item:not(:first-child)').forEach(elem => {
elem.style.display = 'none'
})
dateTimeComponent.$children[0].$children[0].newDatetime = dateTimeComponent.$children[0].$children[0].newDatetime.set({minute: 0})
} else {
document.querySelectorAll('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item').forEach(elem => {
elem.style.display = 'block'
})
}
}
}
}
})
Of course this isn't totally safe, you need to validate it on the server-side
@soyjonathanespinosa maybe I can help you, I made this manual code to disable the minutes to limite from 06:00 to 20:00
first and simple, with css you can disable the hours like this
.vdatetime-time-picker__list--hours { .vdatetime-time-picker__item:nth-child(-n + 6) { display: none; } .vdatetime-time-picker__item:nth-last-child(-n + 3) { display: none; } }
but the minutes are dynamic, so if the user select the hour 20, you need to hide all the minutes except the 00, you can do it with this code
This code was made in vuejs, and the first section where I test if
this.$refs.timeStart.isOpen
is for multiples inputs, I need to know each input are open so it doesnt throws an error, you may need adapt to your codedocument.body.addEventListener('click', (e) => { if (e.target.closest('.vdatetime-time-picker__item') && e.target.closest('.vdatetime-time-picker__list--hours') || e.target.closest('.vdatetime')) { let dateTimeComponent if (this.$refs.timeStart.isOpen) { dateTimeComponent = this.$refs.timeStart } else if (this.$refs.timeEnd.isOpen) { dateTimeComponent = this.$refs.timeEnd } let selected = document.querySelector('.vdatetime-time-picker__list--hours .vdatetime-time-picker__item.vdatetime-time-picker__item--selected') if (selected) { let hour = selected.innerText; if (document.querySelector('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item')) { if (hour == '20') { document.querySelectorAll('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item:not(:first-child)').forEach(elem => { elem.style.display = 'none' }) dateTimeComponent.$children[0].$children[0].newDatetime = dateTimeComponent.$children[0].$children[0].newDatetime.set({minute: 0}) } else { document.querySelectorAll('.vdatetime-time-picker__list--minutes .vdatetime-time-picker__item').forEach(elem => { elem.style.display = 'block' }) } } } } })
Of course this isn't totally safe, you need to validate it on the server-side
Excellent, I will verify your code and test it, thank you