Date-fns format and locale problem

[simplest]

Hi,

I used the sample from Material UI and tried to modify it. I am having a bit of trouble trying to do locale on a Material UI datepicker with a custom format but I am not sure what I am doing wrong…

Below is the link to my code so far:

multiline datepicker - CodeSandbox

[noelbjohn]

You need to set the dateLang variable as the state of the component as shown below:

import React from "react";
import Button from "@material-ui/core/Button";
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
	MuiPickersUtilsProvider,
	KeyboardDatePicker
} from "@material-ui/pickers";
import "date-fns";
import { enUS, zhTW, zhCN } from "date-fns/locale";

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);
	};
	
	const [dateLang,setDateLang] = React.useState(enUS);

	return (
		<div>
			<Button onClick={() => setDateLang(enUS)}>en-US</Button>
			<Button onClick={() => setDateLang(zhTW)}>zh-TW</Button>
			<Button onClick={() => setDateLang(zhCN)}>zh-CN</Button>
			<MuiPickersUtilsProvider utils={DateFnsUtils} locale={dateLang}>
				<Grid container justify="space-around">
					<KeyboardDatePicker
						disableToolbar
						variant="inline"
						format={"LLL do yyyy \n EEEE"}
						margin="normal"
						id="date-picker-inline"
						label="Date picker inline"
						value={selectedDate}
						onChange={handleDateChange}
						multiline
						KeyboardButtonProps={{
							"aria-label": "change date"
						}}
					/>
				</Grid>
			</MuiPickersUtilsProvider>
		</div>
	);
}

[simplest]

Hi noelbjohn,

Thank you for the tips. I also noticed the “\n” in the format doesn’t seem to work. Is there a way around to make the date and the name of day in two separate lines?

[noelbjohn]

Hi simplest,
You can modify the TextfieldComponent prop for a custom Textfield component as shown below:

import React from "react";
import {TextField,Button} from '@material-ui/core';
import Grid from "@material-ui/core/Grid";
import DateFnsUtils from "@date-io/date-fns";
import {
	MuiPickersUtilsProvider,
	KeyboardDatePicker
} from "@material-ui/pickers";
import "date-fns";
import { enUS, zhTW, zhCN } from "date-fns/locale";

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);
	};
	let dateLang = enUS;
	const changeLang = (lang) => {
		switch (lang) {
			case "tc":
				dateLang = zhTW;
				break;
			case "sc":
				dateLang = zhCN;
				break;
			default:
				dateLang = enUS;
				break;
		}
	};

	return (
		<div>
			<Button onClick={changeLang.bind(this, "en")}>en-US</Button>
			<Button onClick={changeLang.bind(this, "tc")}>zh-TW</Button>
			<Button onClick={changeLang.bind(this, "sc")}>zh-CN</Button>
			<MuiPickersUtilsProvider utils={DateFnsUtils} locale={dateLang}>
				<Grid container justify="space-around">
					<KeyboardDatePicker
						disableToolbar
						variant="inline"
						format={"LLL do yyyy | EEEE"}
						margin="normal"
						id="date-picker-inline"
						label="Date picker inline"
						value={selectedDate}
						onChange={handleDateChange}
						TextFieldComponent={
							(props)=> {
								const date = props.value.split('|')[0];
								const day = props.value.split('|')[1];
								return (
								<TextField 
									{...props} 
									multiline 
									rows={2} 
									value={`${date}\n${day}`}/>
								)
							}
						}
						KeyboardButtonProps={{
							"aria-label": "change date"
						}}
					/>
				</Grid>
			</MuiPickersUtilsProvider>
		</div>
	);
}