Question 53478 in Javascript Question posted in
A very good W3school tutorial can be found here.

Using material ui4 which datepicker should use for ReactJS – Javascript

I’m new in ReactJS. I have start working with the ReactJS using material ui 4 and ReactJS 17.2.
I’m not able to take decesion which material date picker we need use.in my requirement I’m using input textbox with type date. But it is not working properly.

My requirement is user can select date from clicking on datepicker and select date from Calendar. Or user can type date from input.

User can input any date format it should be convert in required date format like

dd-mmm-yyyy, 24-Mar-2023

Can anyone suggest me which datepicker should I use using material ui 4?

Tags:

2

Answers


  1. 0

    Coincidentally, we just updated our pickers today when updating to MUIv5 so I’m fresh off of looking at what we were using for MUIv4…

    (Be aware that this is a deprecated package and is no longer in active development)

    We used @material-ui/pickers (docs) (npm repo). This was the preferred library for the MUI team when on v4 and they have rolled the updated version of it into the MUIv5 library. The documentation website was taken down earlier this year, but you can access a snapshot of it here.

    In response to your comment. Your code below should work if you set the property format="DD-MMM-YYYY. It works for me in this example. Just be sure to use the 1.3.13 version of @date-io/[adapter] –
    I used dayjs in the example; later versions are not compatible.

    If you have a choice, I would suggest you go with MUIv5 to get newer features with their @mui/x-date-pickers package, but if you’re stuck with v4, then this should work.

    import React, { useState } from 'react'
import {
  MuiPickersUtilsProvider,
  KeyboardDatePicker,
} from '@material-ui/pickers'
import DayJsUtils from '@date-io/dayjs'

export default function KeyboardDatePickerExample() {
  const [selectedDate, setSelectedDate] = useState()

  return (
    <MuiPickersUtilsProvider utils={DayJsUtils}>
      <KeyboardDatePicker
        autoOk={true}
        value={selectedDate}
        format="DD-MMM-YYYY"
        onChange={(e) => setSelectedDate(e)}
      />
    </MuiPickersUtilsProvider>
  )
}
    Login or Signup to reply.
  2. 0

    MUI team have been working on some complex features such as Grid and Pickers (date and time) under mui-x.

    Quoting from the docs:

    We’re officially decoupling MUI X’s versioning from MUI Core (including @mui/material: Material UI). We understand that this may cause confusion, so we’d like to explain the main reasons why we’re moving in this direction.

    You can read the whole blog about the features and the reason that this was done here.

    mui-x should work fine with v4, nevertheless, I recommend upgrading your MUI version to 5 as soon as possible, since it includes a lot of cool features and has an awesome DX.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search