Created
January 5, 2020 21:57
-
-
Save silkyfray/d46babf96c792ef99d09e38ed0ca583a to your computer and use it in GitHub Desktop.
How to use Bulma Calendar in React
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { useEffect } from 'react'; | |
import bulmaCalendar from 'bulma-calendar/dist/js/bulma-calendar.min'; | |
import "~bulma-calendar/dist/css/bulma-calendar.min.css" | |
function Dob({ className }) { | |
useEffect(() => { | |
// Initialize all input of date type. | |
const calendars = bulmaCalendar.attach('[type="date"]', {}); | |
// Loop on each calendar initialized | |
calendars.forEach((calendar) => { | |
// Add listener to date:selected event | |
calendar.on('date:selected', (date) => { | |
console.log(date); | |
}); | |
}); | |
// To access to bulmaCalendar instance of an element | |
// eslint-disable-next-line no-undef | |
const element = document.querySelector('#dob'); | |
if (element) { | |
// bulmaCalendar instance is available as element.bulmaCalendar | |
element.bulmaCalendar.on('select', (datepicker) => { | |
console.log(datepicker.data.value()); | |
}); | |
} | |
}, []); | |
return ( | |
<div className={className}> | |
<p className="subtitle is-5">Date of Birth</p> | |
<input id="dob" type="date" /> | |
</div> | |
); | |
} | |
export default Dob; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I am trying to use bulma calendar with an react app, I am having issues because part of the element that use bulma calendar, use 3 instances of it. This specific component need to exists iteratively which means 2 components are 6 instances.
First I was having the issue of the component not starting the bulma instances, I solve it.
Second I got the issue of reinstancing existing bulma calendar on the previous components, I solve it.
Third I got the issue of data being deleted on the component, i solved it.
Now I having the issue of everything time the bulma calendar get information is deleting other components, which is wierd.
I been trying even using useRef and still the same, the debugger show the array holding the information that build the iterative component is being incorrectly getted inside the select event of bulma calendar. If someone has got a similar problem, hope to hear any additional information that can point my out to a solution or either a solution at all, thank you everyone reading this!