CODEWITHSUNDEEP
reactjsmaterial-ui
scriobh
scriobh

Reputation: 890

Focus a particular date in Material UI DatePicker

How to highlight initial date to tomorrow or to a particular date in React Material UI's DatePicker component?

Excerpt from my code

<DatePicker
  name="dueDate"
  label="Due Date"
  disablePast
/>

Upvotes: 2

Views: 1765

Answers (2)

Waqas Ahmed
Waqas Ahmed

Reputation: 1411

For MUI v5 the prop defaultCalendarMonth will work in case if someone want to move the selected date to previous month or year or 10 years earlier

<DatePicker
  name="dueDate"
  label="Due Date"
  defaultCalendarMonth={DateTime.now().minus({ years: 10 })}
  disablePast
/>

Upvotes: 0

krsna
krsna

Reputation: 4343

Just set the initialFocusedDate prop of DatePicker

Below code will set the initial focussed date to tomorrow.

import moment from 'moment'

... 

<DatePicker
  name="dueDate"
  label="Due Date"
  initialFocusedDate={moment().add(1, 'days')}
  disablePast
/>

You can set the initialFocusedDate to which ever date you want and that gets focussed when you open the DatePicker.

Upvotes: 1

Related Questions