Open joaoamorim99 opened 1 year ago
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;
I put type="datetime" on html and it doesn't work.