Even though I have initialized the format as a prop in DesktopDatePicker, when I change the value it comes like this: 2020-01-01T00:00:00.000Z
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DesktopDatePicker
inputVariant="outlined"
id="date-picker-dialog"
label="Birthday"
fullWidth
name="dob"
onChange={(val) => {
formik.setFieldValue("dob", val);
}}
renderInput={(params) => <TextField {...params} />}
onBlur={formik.handleBlur}
value={formik.values.dob}
format="yyyy-MM-dd"
error={formik.errors.dob && formik.touched.dob}
/>
</LocalizationProvider>
Related
I want to set a custom InputFormat as follows
2018-01-05 13:08:00
Here is the sample code
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DateTimePicker
renderInput={(props) => <TextField {...props} size="small" />}
value={dayjs(myDate)}
onChange={(value) => setDate(value)}
minDate={dayjs(startDate)}
maxDate={dayjs(endDate)}
/>
</LocalizationProvider>
How can I do that?
Try this it might works, Use inputFormat props.
inputFormat="YYYY-DD-MM HH:mm:ss
<DateTimePicker
renderInput={(props) => <TextField {...props} size="small" />}
value={dayjs(myDate)}
onChange={(value) => setDate(value)}
minDate={dayjs(startDate)}
maxDate={dayjs(endDate)}
inputFormat="YYYY-DD-MM HH:mm:ss"
/>
Here is my basic code to accomplish the task, but couldn't come up with any outcome
<TextField
sx={{
'&::-webkit-calendar-picker-indicator': {
display: 'none',
'-webkit-appearance': 'none',
},
}}
id="outlined-basic"
variant="outlined"
type="date"
helperText="Please select the date"
/>
Also, I did a bit research on InputProps (endAdornment) within TextField to remove the icon, but that didn't work.
You can define in the components property the icon to be null for both cases.
<TimePicker
label="Time"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
disableOpenPicker
/>
<DateTimePicker
label="Date&Time picker"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
disableOpenPicker
/>
Here is a working sandbox
I guess u r using MUIv5
(and I guess u talking about DatePicker)
In that case (as u mentioned), the icon is rendered cuz the InputProps with endAdornment is passed to the text field, if u omit that prop, there will be no icon.
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={({ InputProps, ...props }) => (
<TextField {...props} />
)}
/>
<LocalizationProvider dateAdapter={AdapterDateFns}> <DateRangePicker error startText="Start Date" helperText="Invalid Date Range" endText="End Date" value={value} onChange={(newValue: any) => { setValue(newValue); }} renderInput={(startProps, endProps) => ( <> <TextField variant="standard" {...startProps} className="filter_date-range" /> <span className="date-label">MM/DD/YY</span> <Box sx={{ mx: 2 }}> to </Box> <TextField variant="standard" {...endProps} className="filter_date-range" /> <span className="date-label right">MM/DD/YY</span> </> )} /> </LocalizationProvider>
I wrote the above code. On Date Range Picker I want to show the error message like invalid date range selected, but I am getting below error, So is there any way we can show the message on date range picker.
So I have this KeyboardDatePicker and I want to gray out past days and some feature days that. those grayed should not be clickable.
here how my looks now
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id="date-picker-inline"
label="Select Date"
value={this.state.selectedDate}
onChange={(e) => {this.getTimeSchedule(e); this.handleChangeDate(e)}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
autoOk={true}
/>
</MuiPickersUtilsProvider>
I read few explanation on the internet on how it can be done here enter link description here
it should look like this
renderDay={(day, selectedDate, dayInCurrentMonth, dayComponent) => {
if (isHoliday) {
return 'Special component';
} else {
return dayComponent;
}
}}
however I am confused on how to make "Special component"
You don't have to use a custom renderer, you can use the following KeyboardDatePicker props:
disablePast will disable the past dates
shouldDisableDate will allow you to use your own rule to disable dates
In the following example I disable all the past dates (with disablePast) and all the sundays (with shouldDisableDate):
function disableSundays(date) {
if (date.getDay() == 0) return true;
}
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id="date-picker-inline"
label="Select Date"
value={this.state.selectedDate}
onChange={(e) => {this.getTimeSchedule(e); this.handleChangeDate(e)}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
autoOk={true}
disablePast={true}
shouldDisableDate={disableSundays}
/>
</MuiPickersUtilsProvider>
);
I want to change the format of the date on DatePicker (material-ui-pickers), but when I use the formatDate feature, the format of the date does not change and still show only month and date, not the year selected.
This is my code:
<DatePicker
margin="normal"
disableFuture
openTo="year"
views={["year", "month", "day"]}
value={selectedDate}
onChange={this.handleDateChange}
maxDate={maxdate}
formatDate={(date) => moment(date).format('DD-MM-YYYY')}
/>
2022 method is:
<DatePicker inputFormat="MM/dd/yyyy" />
The prop for changing the date format is called format and takes a string instead of a function.
<DatePicker
margin="normal"
disableFuture
openTo="year"
views={["year", "month", "day"]}
value={selectedDate}
onChange={this.handleDateChange}
maxDate={maxdate}
format="DD-MM-YYYY"
/>
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DateTimePicker
renderInput={(props) => <TextField variant="standard" className="w-100" required {...props} />}
label="voyage Start Date"
value={formik.values?.voyageStartDate}
onChange={(newValue) => {
formik.setFieldValue("voyageStartDate",moment(newValue).format("YYYY-MM-DD HH:mm:ss"))
}}
onKeyPress={() => formik.setFieldTouched("voyageStartDate")}
/>
</LocalizationProvider>
For 2022 the solution is ampm={false} parameter
<DateTimePicker
ampm={false}
renderInput={...}
/>
Check mui-x doc
Try this:
<DatePicker inputFormat="DD/MM/YYYY" views={["day", "month", "year"]}
value={value} onChange {(newValue) => {setValue(newValue);}} />