Daterange calendar does not update the range when second date is selected

[lukajose]

Your issue may already be reported!
Please search on the issue track before creating one.

• Is this something you can debug and fix? Send a pull request! Bug fixes and documentation fixes are welcome.
• Are you running the latest version?
• Are you reporting to the correct repository?

Bug Report

Environment

• Bulma version: 6.1.18
• OS: [e.g. OSX 10.13.4, Windows 10]
• Browser: Chrome | Firefox

Current Behavior
Calendar does not update the range display after selecting the second date. Only once you close the component after selecting the 2 dates the component rerenders the calendar range.

Expected:

After selecting both dates, the ui should update the component to reflect the range.

Input Code

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

const Calendar = ({onSelect) => {
  
  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={"bulmaCalendar"}>
      <input id="calendar" type="datetime" data-color="dark" />
    </div>
  );
};

export default Calendar;

[lukajose]

Closing issue, found the problem, leaving the fix here just in case:

if anything fails inside this function:

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);
      });
      ```
      The component fails to update. Which was happening as the time range was returning a string in the format:
      ```
      2022-02-01 10am  -  2022-02-05 10am
      ```
      
      After fixing the datepicker to a new date the update started working again , here is the fix:
      
      ```
      import bulmaCalendar from 'bulma-calendar';
import 'bulma-calendar/dist/css/bulma-calendar.min.css';
import { useEffect, useRef } from 'react';

const Calendar = ({className,onSelect, defaultDate = new Date()}) => {
  const ref = useRef();
  useEffect(() => {
    if(ref.current) {
      console.log("ref is:", ref);
    
    // Initialize all input of date type.
    const calendars = bulmaCalendar.attach('input[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 = ref.current;
    // 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 range = datepicker.data.value()
        const dates = range.split('-');
        const dateTime = Date(dates[0]);
        // console.log("my datetime:",datetime);
        onSelect(dateTime);
      });
    }
  }
    
  }, [ref.current]);

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

export default Calendar;

      
      ```