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.
• [x] Are you running the latest version?
• [x] 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 (

); };

export default Calendar;

  ```