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
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…
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…
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…
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…
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…
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
1
2