How to get the selected date using vanilla js

[jokerlovescaptainmarvel]

Hello, I'm trying to find a way how to get the selected date from the calendar using vanilla js.

I'm using an inline script but unfortunately, I can't find a way to get the selected date from the calendar.

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.7.0/datepicker.min.js"></script>

<div inline-datepicker data-date="02/25/2022"></div>

Any help would be appreciated!

[jokerlovescaptainmarvel]

Any help?

[allestaire]

Dude, there documentation is not good,
Which is we are on the same boat.
They dont have an event for onSelect, it must be with the input

I guess they did this on purpose, in order to make us do upgrade.

It seems like there is a method for the Javascript instance

if you instanciate the picket with javascript instead of element
you will get the data

const dp = new DatePicket(element, {})
dp.getDate()

[allestaire]

One way to listen to value changes is to exntend its class and add your functionality
This code demonstrate on how to trigger onSelect option. so that everytime a new date is selected, it will be trigger

import Datepicker from 'flowbite-datepicker/Datepicker'

class FlowbiteDatepicker extends Datepicker {
  constructor(element, options = {}, rangepicker = undefined) {
    super(element, options, rangepicker)
    this.options = options
  }

  setDate(...args) {
    super.setDate(args);
    if (this.options.hasOwnProperty('onSelect')) {
      this.options.onSelect(this)
    }
  }
}

export default FlowbiteDatepicker

// Usage
new FlowbiteDatepicker(element, {
   onSelect(instant) {
      // Triggered when date is selected
      console.log(instant)
   }
})