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.
Related
I spend almost half day but can't not found any solution to customize the title of week day of Material-ui DateRangePicker. Instead of "S", "M",..., I want to show the title as I expected.
Already tried to custom the dateAdapter but this not helps.
I see that Material-ui has component called MuiPickersUtilsProvider which I can customize the day title as I want but this component not support date-range picker.
I would highly appreciate any advices. Here is my code so far:
import * as React from 'react';
import TextField from '#mui/material/TextField';
import AdapterDateFns from '#mui/lab/AdapterDateFns';
import LocalizationProvider from '#mui/lab/LocalizationProvider';
import Box from '#mui/material/Box';
import MobileDateRangePicker from '#mui/lab/MobileDateRangePicker';
export class CustomDateFns extends AdapterDateFns {
getWeekdays() {
return ['AA', 'BB', 'CC', 'DD', 'EE', 'FF', 'GG'];
}
}
export default function ResponsiveDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
return (
<LocalizationProvider dateAdapter={CustomDateFns}>
<MobileDateRangePicker
inputFormat="dd/MM/yyyy"
startText="Start date"
endText="End date"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
clearable={!!value[0] && !!value[1] ? true : false}
clearText="Reset"
cancelText=""
okText="Confirm"
toolbarTitle=""
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} />
<Box sx={{ mx: 2 }}> to </Box>
<TextField {...endProps} />
</React.Fragment>
)}
/>
</LocalizationProvider>
);
}
Here is what current it shows:
What I expect is:
The only way I found until now is manipulating the DOM, then set innerHTML. But I don't think this is a good way because we can't control DOM as this is generated by library, not by me.
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/
I would like to display a title to the DatePicker dialog. This is what I have so far:
import React, { Fragment, useState } from "react";
import { DatePicker } from "#material-ui/pickers";
function BasicDatePicker(props) {
const [selectedDate, handleDateChange] = useState(new Date());
return (
<Fragment>
<DatePicker
label="Basic example"
value={selectedDate}
onChange={handleDateChange}
animateYearScrolling
/>
);
}
I want it to look something like this?
How can I do this?
Thanks in advance
In material-UI DatePicker v3, there is no field to add a title as you need.
But in v4, Instead of using "DatePicker" component you have to use "MobileDatePicker".
In, "MobileDatePicker" there is a label field to add a title in your calendar.
Find the working codesandbox link
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 ?? ''}