Date time picker doesn't work

[joaoamorim99]

I put type="datetime" on html and it doesn't work.

[lukajose]

try the following, if you are using react :

import bulmaCalendar from 'bulma-calendar';
import 'bulma-calendar/dist/css/bulma-calendar.min.css';
import { useEffect } from 'react';

const Calendar = ({className,onSelect, defaultDate = new Date()}) => {

  useEffect(() => {
    // Initialize all input of date type.
    const calendars = bulmaCalendar.attach('[type="datetime"]', {
      isRange: true,
    });

    // Loop on each calendar initialized
    calendars.forEach((calendar) => // Add listener to date:selected event
      calendar.on('select', (date) => {
        console.log("selected a date:", date)

      }));

    // To access to bulmaCalendar instance of an element
    // eslint-disable-next-line no-undef
    const element = document.querySelector('#calendar');
    if (element) {
      // bulmaCalendar instance is available as element.bulmaCalendar
      element.bulmaCalendar.on('select', (datepicker) => {
        console.log(datepicker.data.value());
        console.log(typeof datepicker.data.value());
        const dateTime = Date(datepicker.data.value());
        console.log("my datetime:",datetime);
        onSelect(dateTime);
      });
    }

  }, []);

  return (
    <div className={className}>
      <input id="calendar" type="datetime" data-color="dark" />
    </div>
  );
};

export default Calendar;