Questions tagged [mui-x-date-picker]
30 questions
17
votes
1 answer
How to change the icon in MUI X DatePicker?
I can't add my icon to the component.
https://codesandbox.io/s/materialuipickers-material-demo-forked-soctc

kadadov
- 173
- 1
- 1
- 5
13
votes
3 answers
Material UI: How to change DatePicker text and calendar icon color?
I am trying to change the MUI X DatePicker (with Material UI) date text and calendar icon color.
I tried to change it passing style to InputProps, but it worked only for removing border.
Rather than that, nothing changes, I tried to apply style to…

FD3
- 1,462
- 6
- 24
- 47
5
votes
3 answers
MUI X DatePicker formatting and setting default value issue
I am having a bit of an issue, and I've had not much luck finding a solution to it.
The MUI X DatePicker (with Material UI) seems to have a format that it has as a default, for displaying the dates as
Fri Oct dd yyyy HH:MM:SS GMT+HHMM (name of…

Vlad SD
- 169
- 1
- 1
- 11
2
votes
1 answer
Mui Datepicker sets incorrect date
I am currently using Mui Datepicker library from @mui/x-date-pickers/DatePicker.
Here's my sample code

Praveen Kumar
- 977
- 3
- 12
- 26
1
vote
1 answer
MUI Datepicker dates to include
If we want to achieve to enable specific dates, and disable all other dates, how can we do that in MUI Datepicker?
I want to enable only dates from 7 days later and 7 days earlier, all other dates should be disabled, how can we acheive that?
I am…

Viraj Khatri
- 380
- 2
- 10
1
vote
1 answer
Use my own custom input in mui x datepicker
I want to allow my users to enter their birthday either by picking it from the date picker or entering the value manually on the input field on a form. For that, I'm using mui-x-datepicker (version 6.9.2) package. But i'm unable to find a way to use…

dilusha_dasanayaka
- 1,401
- 2
- 17
- 30
1
vote
0 answers
TimePicker component was moved from `@mui/lab` to `@mui/x-date-pickers`
I use formik-mui-lab to make DatePicker but this warning appears
MUI: The TimePicker component was moved from @mui/lab to @mui/x-date-pickers.
You should use import { TimePicker } from '@mui/x-date-pickers'
or import { TimePicker } from…

Mahmoud Mohamed
- 11
- 1
1
vote
0 answers
How to change default selected minutes in Material UI picker-KeyboardTimePicker?
I wonder if there's a way to modify whatever is the selected default minutes once I open the Clock in my KeyboardTimePicker.
As you can see I managed to change the disabled minutes into bullets by modifying this…

quielfala
- 361
- 4
- 18
1
vote
0 answers
KeyboardDatePicker's onError gets called every time we change a field
We are using KeyboardDatePicker from @material-ui/pickers with date-fns, on a website designed with material-ui. Everything works with the KeyboardDatePicker, except we wanted to prevent form submission if the date is invalid. After some trial and…

Myrto Pirli
- 85
- 8
0
votes
1 answer
Set dayOfWeek as monday in mui datepicker 6
I am using material ui Datepicker 6 version and I want to set the dayOfWeek started with monday.
import React from "react";
import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker";
import { LocalizationProvider } from…

Profer
- 553
- 8
- 40
- 81
0
votes
0 answers
Customizing MUI 6 Datecalendar to Support Ethiopian Calendar System with 13 Months
I'm working on a project where I need to use the MUI 6 Datecalendar component, but I want to customize it to support the Ethiopian calendar system, which has 13 months.
How can I properly configure the Datecalendar component to recognize the…
0
votes
1 answer
Jest snapshot test fails with @mui/x-date-pickers, different timestamp in Snapshot
We updated to the latest Mui Date picker. And now we have a strange Problem with a failing snapshot test in our CI pipeline.
In our Jest Test, we set a fixed Date like this:
jest.useFakeTimers().setSystemTime(new Date('04 Dec 1995 00:12:00…

Roger Bücker
- 21
- 2
0
votes
1 answer
Is there any way to Programmatically hide "AM" from AM/PM dropdown in MUI DesktopTimePicker?
I'm creating a time range and encountered this issue.
I want to allow only AM when certain condition is true otherwise both AM/PM should be available
I'm using this
https://mui.com/x/api/date-pickers/desktop-time-picker/
Let me know if you guys can…

MuhammadHunain
- 11
- 3
0
votes
0 answers
How to configure MUI X's DateRangePicker to select weekly ranges?
I'm using the DateRangePicker component from MUI X in my React application. I want to configure it such that users can only select date ranges that represent a full week (i.e., from Monday to Sunday).
Here's the basic setup I have:
import {…

Mir Stephen
- 1,758
- 4
- 23
- 54
0
votes
0 answers
MUI Date Picker how to add a new button next to the openPickerButton (calendar icon)?
I would like to add a clear button (X) to MUI Date Picker next to the calendar icon.
X is on the wrong place
My problem is that I am trying to add it with using endAdornment, but then the clear icon doesn't show up, it only shows up when I use…

stromi
- 1
- 1