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"
/>
Related
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} />
)}
/>
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>
How can I set the placeholder text of the MUI DatePicker. The text that is displayed when deleting the text in the input field. I want to set the text to "tt.mm.jjjj" and I always the following error message:
Format string contains an unescaped latin alphabet character `j`
Sandbox
<DatePicker
inputFormat="tt.mm.jjjj"
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField placeholder="tt.mm.jjjj" {...params} />}
/>
This is how you reset the placeholder of the TextField inside the DatePicker. The reason it doesn't work is because it is overridden by the params.inputProps provided by the DatePicker itself based on the inputFormat:
<DatePicker
{...}
inputFormat="tt.mm.yyyy"
renderInput={(params) => {
console.log(params);
return (
<TextField
{...params}
inputProps={{
...params.inputProps,
placeholder: "tt.mm.jjjj"
}}
/>
);
}}
/>
I am using Material UI's country select (https://material-ui.com/components/autocomplete/#country-select). I have an ongoing issue that when the user clicks into the input, the browser autocomplete pop up blocks the view of country options. I've tried my best to turn autocomplete to off but with no joy. Can anyone advise a possible workaround?
Have tried the 3 commonly suggested fixes:
autoComplete="off"
autoComplete="no"
autoComplete="new-password"
return (
<Autocomplete
id="country-select"
options={options}
classes={{
option: classes.option,
}}
autoHighlight
getOptionLabel={(option) => option.label}
onChange={(e, value) => setFieldValue(field.name, value.label)}
onOpen={field.onBlur}
renderOption={(option) => (
<React.Fragment>
<span>{countryToFlag(option.code)}</span>
{option.label}
</React.Fragment>
)}
renderInput={(params) => (
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
autoComplete="off"
/>
)}
/>
);
this work for me
autoComplete="chrome-off"
AutoComplete should be on rendered Input by material-ui, not the TextField wrapper. So you should do something like that:
<TextField
{...params}
label={props.label}
name={props.name}
placeholder={props.placeholder}
variant="outlined"
helperText={_renderErrorText()}
error={hasError}
inputProps={{
autoComplete: 'new-password',
}}
/>
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);}} />