Min Time and Max Time

[spacedog4]

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

[soyjonathanespinosa]

I am expecting the same feature. Please help us.

[spacedog4]

@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]

@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

Excellent, I will verify your code and test it, thank you