Skip to content

Instantly share code, notes, and snippets.

@silkyfray
Created January 5, 2020 21:57
Show Gist options
  • Save silkyfray/d46babf96c792ef99d09e38ed0ca583a to your computer and use it in GitHub Desktop.
Save silkyfray/d46babf96c792ef99d09e38ed0ca583a to your computer and use it in GitHub Desktop.
How to use Bulma Calendar in React
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;
@klys
Copy link

klys commented Jul 14, 2022

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment