Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

react-multi-date-picker – time_picker Automatically converting AM to PM when typing in the time manually

So when I was working with react-multi-date-picker – time_picker I faced this issue.
When we manually enter the time in Timepicker textbox it automatically changes the ‘AM’ I entered to ‘PM’. This only happens when we enter the time between 12:00 AM ans 12:59 AM.
I don’t want it to change it to PM as the users might get confused if they don’t notice this time change.
When I checked their official site, I found the issue there too.

https://shahabyazdi.github.io/react-multi-date-picker/other-pickers/

You can check this issue in their official site. Go to ‘Only Time Picker Meridiem‘ and use their time picker and enter ‘12:00:00 AM‘ manually and see the magic.
Does anyone have any workaround for this? Thanks in advance.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

I went through the docs and found the part you were mentioning in the question.
Eventhough I don’t have a correct answer for this, I have a workaround which may work for you.

  onChange={(date, dateParams) => {
    const { input, isTyping } = dateParams;
    const updatedDateObject = new Date(date);
    const hours = updatedDateObject?.getHours();
    if (
      input?.value?.toLowerCase()?.includes('am')
      && hours >= 12
      && isTyping
    ) {
      updatedDateObject?.setHours(hours - 12);
      // Use the updatedDateObject as per your liking!
    }
    // codes to run if the user is not manually typing the time!
  }}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading