I am using the following code, taken from https://material-ui.com/components/pickers/#date-time-pickers
<form className={classes.container} noValidate>
<TextField
id="datetime-local"
label="Next appointment"
type="datetime-local"
defaultValue="2017-05-24T10:30"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
/>
</form>
Now, what I want to do is when the user clicks anywhere in the input, open the calendar drop down.At the moment it only opens if the user clicks the calendar icon. I've looked at other answers but did not get anything.
Thanks.
I suggest checking out the #material-ui/pickers library (which is developed by the same team) as opposed to using a TextField component with datetime styling.
The following example comes from https://material-ui-pickers.dev/getting-started/usage:
import React, { useState } from 'react';
import DateFnsUtils from '#date-io/date-fns'; // choose your date lib
import {
DateTimePicker,
MuiPickersUtilsProvider,
} from '#material-ui/pickers';
const App = () => {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker value={selectedDate} onChange={handleDateChange} />
</MuiPickersUtilsProvider>
);
}
export default App;
Resources:
https://material-ui-pickers.dev/demo/datetime-picker
https://material-ui-pickers.dev/getting-started/installation#peer-library
Edit:
As of Material UI V5 (still in alpha stage), #material-ui/pickers will become part of the Material UI Lab package.
Resources:
https://github.com/mui-org/material-ui-pickers/issues/2157
https://next.material-ui.com/components/date-picker/
Related
I have DatePicker component from MUI and this is what it looks like when I open it on the PC screen.
This is what it looks like when it's a mobile screen.
It seems like MUI automatically switched the view of DatePicker for mobile.
Is there a way to keep the PC view of DatePicker for the mobile screen?
This is code sandbox demo
Here is MUI DatePicker component document
import * as React from "react";
import TextField from "#mui/material/TextField";
import { AdapterDayjs } from "#mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "#mui/x-date-pickers/DatePicker";
export default function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
Attempts
Currently, I was able to display the PC view of DatePicker on the mobile screen, but that's only I open the google developer tool and toggle the device toolbar.
When I close it, the DatePicker will be displayed as the Mobile view on both the PC and mobile screen.
import * as React from "react";
import TextField from "#mui/material/TextField";
import { AdapterDayjs } from "#mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "#mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "#mui/x-date-pickers/DatePicker";
export default function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<LocalizationProvider dateAdapter={AdapterDayjs}>
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
desktopModeMediaQuery="#media (pointer: coarse)"
/>
</LocalizationProvider>
);
}
Having DesktopDatePicker works both on the PC and mobile.
mui.com/x/react-date-pickers/date-picker/#responsiveness
Does anyone know what is the props to make a textfield in material ui to be 24 hour format? I cant seem to find anywhere?
here is my current component
<TextField
type="time"
variant="outlined"
size="small"
name="startTime"
value={this.state.startTime}
onChange={handleChange}
/>
TextField meant to be used for text, use TimePicker for that purpose
import React, { Fragment, useState } from "react";
import { TimePicker } from "#material-ui/pickers";
function BasicTimePicker() {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<TimePicker
clearable
ampm={false}
label="24 hours"
value={selectedDate}
onChange={handleDateChange}
/>
);
}
export default BasicTimePicker;
Hi currently I am using React, Material-UI, KeyboardDatePicker.
You can see the code in:
https://codesandbox.io/s/material-demo-forked-rt1f1?file=/index.js
import "date-fns";
import React from "react";
import Grid from "#material-ui/core/Grid";
import DateFnsUtils from "#date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardTimePicker,
KeyboardDatePicker
} from "#material-ui/pickers";
export default function MaterialUIPickers() {
// The first commit of Material-UI
const [selectedDate, setSelectedDate] = React.useState(
new Date("2014-08-18T21:11:54")
);
const handleDateChange = (date) => {
setSelectedDate(date);
};
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
<KeyboardDatePicker
margin="normal"
id="date-picker-dialog"
label="Date picker dialog"
format="MM/dd/yyyy"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
"aria-label": "change date"
}}
views={["year", "month", "date"]}
/>
</Grid>
</MuiPickersUtilsProvider>
);
}
What I want to do is when I click the calender Icon, if I click the date tool bar(which is current date in the UI), I want the interface changes to month selection interface.
I am planning to custom the datPicker using ToolbarComponent.
from the Material-UI official documnet (https://material-ui-pickers.dev/api/KeyboardDatePicker), found out I got that I need to enter some code like this:
ToolbarComponent={ComponentClass<ToolbarComponentProps<unknown, DateTimePickerView>, any> | FunctionComponent<ToolbarComponentProps<unknown, DateTimePickerView>> }
But hard to understand ToolbarComponent I should enter.
How can I customize the prop of the calendar? please let me know.
Thanks
Simply pass a function to the ToolbarComponent API and return a JSX.
ToolbarComponent={() => <Box>HELLO, CUSTOM TOOL BAR</Box>}
The above jsx will be rendered above the calendar.
How can I change the language of a Material-UI date picker? It doesn't seem to fully work for the whole date picker.
What my current date picker looks like:
#MUI5 solution
import * as React from 'react';
import { AdapterDateFns } from '#mui/x-date-pickers/AdapterDateFns';
import { LocalizationProvider } from '#mui/x-date-pickers/LocalizationProvider';
import { DatePicker } from '#mui/x-date-pickers/DatePicker';
import {es} from 'date-fns/locale'
import {TextField} from "#mui/material";
export const MyDatePicker = () => {
const [value, setValue] = React.useState(new Date())
const handleChange = (newValue) => {
setValue(newValue)
}
return (
<LocalizationProvider locale={es} dateAdapter={AdapterDateFns}>
<DatePicker
label="Date desktop"
inputFormat="dd-MMMM-yyyyy"
value={value}
onChange={handleChange}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
)
}
Another solution is to use date-fns in addition to the #Shikyo solution: :
import DateFnsUtils from "#date-io/date-fns";
import { fr } from "date-fns/locale";
<MuiPickersUtilsProvider locale={fr} utils={DateFnsUtils}>
...
</MuiPickersUtilsProvider>
It's on the bottom of the documentation page https://material-ui-pickers.dev/api/DatePicker
<DatePicker
okLabel="Text"
clearLabel="Text"
cancelLabel="Text"
...
/>
If you are using day.js adapter
import "dayjs/locale/es";
import "dayjs/locale/en";
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="es">
or
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="en">
with i18
<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale=
{i18n?.language}>
with moment.js
import 'moment/locale/es'
import 'moment/locale/en'
The following page of the docs looks like it should be what you want: https://material-ui-pickers.firebaseapp.com/localization/date-fns
This page has an example of changing the locale with a menu item. Specifically, if you want to just provide one locale you can pass the prop locale into the component MuiPickersUtilsProvider.
You should import the locales depending on the adapter, here is a possible solution with dayjs in the Material UI documentation:
https://mui.com/x/react-date-pickers/localization/
I'm having some troubles with Material UI's Datepicker, I'm searching a way to reset its field but I didn't find a way to do it.
I've also consulted this issue.
Can someone help me please?
You can set the value property as null and it will clear it.
I found the same issue, researched, and got a solution for that,
We can use InputAdornments to have a close button in that.
Remember, we have to use event.stopPropagation() to stop the DatePicker pop up on click of Close button.
You may have a look at here, https://codesandbox.io/s/material-ui-pickers-usage-demo-forked-tptz3?file=/src/App.jsx or https://tptz3.csb.app/
import React, { useState } from "react";
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider, DatePicker } from "#material-ui/pickers";
import ClearIcon from "#material-ui/icons/Clear";
import { IconButton } from "#material-ui/core";
function App() {
const [selectedDate, handleDateChange] = useState(new Date());
function handleClr(e) {
e.stopPropagation();
handleDateChange(null);
}
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
autoOk
variant="inline"
format="dd/MM/yyyy"
value={selectedDate}
onChange={handleDateChange}
InputProps={{
endAdornment: (
<IconButton onClick={(e) => handleClr(e)}>
<ClearIcon />
</IconButton>
)
}}
/>
</MuiPickersUtilsProvider>
);
}
export default App;
null clears datepicker, as an example take a look at https://codesandbox.io/s/material-ui-pickers-clear-hhlvg
In material ui version upper 4.0.0 you have to set empty string to reset the date pickers.
value={person.birthday ?? ''}