Closed lukajose closed 1 year ago
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;
```
Your issue may already be reported! Please search on the issue track before creating one.
Bug Report
Environment
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