Datepicker

Topic: Datepicker

KES free asked 3 years ago

Expected behavior Hi. I need close datepicker when target date is choosen. But user should click button 'ok' to confirm the choise. The event 'dateChange' is unuseful for this task. It fires only when button 'ok' is clicked. I think the confirm button 'ok' should be optional. Thanks. Actual behavior

Resources (screenshots, code snippets etc.)

Add comment

Michał Duszak staff answered 3 years ago

0 0 Best answer

<p>Untill this option is not introduced, you can imitate click on Ok button upon selecting the day. Here's an example of this workaround:</p>

<p><a href="https://mdbootstrap.com/snippets/standard/m-duszak/3542737#js-tab-view" target="_blank">https://mdbootstrap.com/snippets/standard/m-duszak/3542737#js-tab-view</a></p>

<pre class="prettyprint"><code>const datepickerEl = document.querySelector('.datepicker')
const datepicker = mdb.Datepicker.getInstance(datepickerEl)

document.body.addEventListener('open.mdb.datepicker', () => {
    setTimeout(() => {
        document.body.addEventListener('click', handleDatePickerCellClick)
    }, 0)

})

function handleDatePickerCellClick(e, okBtn) {
    const isCellTargeted = e.target.classList.contains('datepicker-day-cell') || e.target.parentNode.classList.contains('datepicker-day-cell')
  if(isCellTargeted) {

setTimeout(() => {
        const okBtn = document.querySelector('.datepicker-ok-btn')
        okBtn.click()
    document.body.removeEventListener('click', handleDatePickerCellClick)
  },50)
  }
}
</code></pre>

Please insert min. 20 characters.

Untill this option is not introduced, you can imitate click on Ok button upon selecting the day. Here's an example of this workaround:

https://mdbootstrap.com/snippets/standard/m-duszak/3542737#js-tab-view

const datepickerEl = document.querySelector('.datepicker')
const datepicker = mdb.Datepicker.getInstance(datepickerEl)

document.body.addEventListener('open.mdb.datepicker', () => {
    setTimeout(() => {
        document.body.addEventListener('click', handleDatePickerCellClick)
    }, 0)

})

function handleDatePickerCellClick(e, okBtn) {
    const isCellTargeted = e.target.classList.contains('datepicker-day-cell') || e.target.parentNode.classList.contains('datepicker-day-cell')
  if(isCellTargeted) {

  setTimeout(() => {
        const okBtn = document.querySelector('.datepicker-ok-btn')
        okBtn.click()
    document.body.removeEventListener('click', handleDatePickerCellClick)
  },50)
  }
}

Add comment

Neo free answered 3 years ago