How to use this lib with react

[araneta]

How to use this library with reactjs? Thanks

[greggmojica]

Any help?

[gamesover]

<input data-provide="datepicker">

it works for me in react

However, I think you have to use jquery within react in most cases

[flora8984461]

Also stuck on this, and I am using Formik, I tried with

<input onChange={ (e) => setFieldValue("FieldName", e.target.value) } data-provide="datepicker" />

While seems the values are not correctly combined with my Field. 🤔

Anyone using similar libs? Thanks!

[flora8984461]

It turns out that onChange not working with Dateinput.

An update on my current trial. I have tried to add jquery into my react, and I used:

const dateRef = useRef(null);

<input ref={dateRef} data-provide="datepicker" />

// refer to https://stackoverflow.com/questions/34167551/react-onchange-being-used-after-a-click-of-a-button-to-alter-value-in-input
useEffect(() => {
    $(dateRef).datepicker()
    .on('changeDate', (e) => {
    //  e here contains the extra attributes 
    setFieldValue("FieldName", e.target.value);
  });
},[])

While I'm getting error TypeError: Cannot define property jQuery3510340167173578868052, object is not extensible

🤔

[gamesover]

$(dateRef).datepicker() => $(dateRef.current).datepicker() ?

[flora8984461]

dateRef).datepicker() => $(dateRef.current).datepicker() ?

Thank you so much for your help. But this seems still broken. I need to take a deeper look into this. (Seems have to use windows.$("") which seems to not use the jquery I installed, and I would expect import $ from 'jquery'; to work.)

But in order to use jquery in my react app, I need to npm install jquery and bootstrap, I feel it comes with a cost 🤔

This might work:

useEffect(() => {
  window.$(dateRef.current).datepicker()
  .on('changeDate', (e) => {
  props.setFieldValue(fieldname, e.target.value)
});
},[])

Going to poke around other tools for React. But I really love this lib's design.

[gamesover]

I use this lib only because our project is very old. Previous codes are written in vanilla js. I have to continue to use it in react component to match datapicker style in other places.

If you are writting a new project, you'd better to look for other react based datepicker.

BTW, the project is no updated since 2019. It seems it almost dead.

[flora8984461]

I use this lib only because our project is very old. Previous codes are written in vanilla js. I have to continue to use it in react component to match datapicker style in other places.

If you are writting a new project, you'd better to look for other react based datepicker.

BTW, the project is no updated since 2019. It seems it almost dead.

Yep, I'll poke around react tools. I was trying to use it cuz our project is using bootstrap. But I can change since it's depending on me. I am trying not to use jquery in react app since I'm not sure why for our projects when using jquery, the $ never works and I need to use window.$().