Date time picker doesn't work #305

Activity

1. lukajose commented on Dec 13, 2022

   

   lukajose

   on Dec 13, 2022

   More actions

   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;