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);}} />
Related
I have a form with a datePicker input from material-ui
When I pick a date and submit my form, if I console.log my data I will receive 'Tue Jan 10 2023 10:31:48 GMT+0100 (Central European Standard Time)' i want to received '01/11/2023'
I would like to format the data received.
Here my DatePicker :
const [deadLine, setDeadLine] = useState(new Date());
<Controller
name="deadLine"
defaultValue={deadLine}
control={control}
render={({ field: { onChange, ...restField } }) => (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label="Request Date"
onChange={(event) => {
console.log(event);
onChange(event);
setDeadLine(event);
}}
renderInput={(params) => <TextField {...params} />}
{...restField}
/>
</LocalizationProvider>
)}
/>
I have already tried :
To Use "format="dd-MM-yyyy"" from material-ui, but it only change the
visual not the data received.
To use moment with
setDeadLine(moment(event.target.value).format('MM/DD/YYYY'));,
still received the initial value.
To know : I am using react-hook-form
First of all to use moment you should wrap you DatePicker with moment Adapter:
<LocalizationProvider dateAdapter={AdapterMoment}> more also, onChange return the value you shouldn't access it with event.target.value, but you have directly the value with moment(value).format('DD/MM/YYYY') and of course don't forget to import Adapter Moment - import { AdapterMoment } from '#mui/x-date-pickers/AdapterMoment';
It should look like that:
<LocalizationProvider dateAdapter={AdapterMoment}>
<DatePicker
label="Request Date"
onChange={(value) => {
setDeadLine(moment(value).format('DD/MM/YYYY'));
}}
renderInput={(params) => <TextField {...params} />}
{...restField}
/>
</LocalizationProvider>
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"
/>
I'm using DatePicker in side a react hook form.
I'm able to get my form to display the Date I pick but it's not in the format I'm expecting.
The text box the is correct August 19, but when I try to get it to display using
it comes back at as this format 2022-09-19T23:51:47.000Z
I'm not sure what I'm missing as i'm pretty stump at the moment on what needs for it to display correctly.
<LocalizationProvider dateAdapter={AdapterDateFns}>
<Controller
name="Date"
control={control}
defaultValue=""
rules={{
required: { value: true, message: "Date is required" },
}}
render={({ field }) => (
<DatePicker
openTo="month"
views={["month", "day"]}
label="month and date"
value={field.value}
onChange={(e, data) =>
field.onChange(data);
}
inputFormat="MMMM dd"
renderInput={(params) => (
<TextField {...params} helperText={null} />
)}
{...field}
/>
)}
/>
</LocalizationProvider>
If you're using date-fns you can do this with the ISOString:
format(new Date('2022-09-19T23:51:47.000Z'), 'MMMM DD', { locale: 'US' });
It would return:
September 19
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>
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>
);