We Keep Coding

How to convert the input date value of Mui Datepicker?

import * as React from "react";
import moment from "moment";
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) => {
console.log("newvalue", newValue);
console.log("newvalue-moment", moment(newValue).format("YYYY-MM-DD"));
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
I am using Mui Datepicker Basic and trying to convert the selected value into YYYY-MM-DD format using moment.js. I have to extract only date and use as payload, But it is not working here and catching the current date.

you can use dayjs library (small library, 7.2k) as moment is very costly (232kb)
import using import dayjs from 'dayjs'
if using Typescript , you can get the type as well
import dayjs, { Dayjs } from 'dayjs'
use it like dayjs(selectedDate).format('MM/DD/YYYY')

Antd <DatePicker/> if value props is set, and click will be infinite loop

I want to set value in value props <DatePicker>. But if i set value, and if i click the date picker, calendar will be infinite loop to the future.
i have use DefaultValue and value props, but produce same error
import React from "react";
import "./index.css";
import type { DatePickerProps } from "antd";
import { DatePicker, Space } from "antd";
import moment from "moment";
const onChange: DatePickerProps["onChange"] = (date, dateString) => {
console.log(date, dateString);
};
const day = moment();
const format = "DD.MM.YYYY";
const App: React.FC = () => (
<Space direction="vertical">
<DatePicker
onChange={onChange}
format={format}
defaultValue={moment(day)}
/>
</Space>
);
export default App;
You can try here
SANBOX
and the picture is here
PICTURE
i have use DefaultValue and value props, but produce same error.
i have delete DefaultValue and value props and calendar is normal, but i cannot set value from beginning

As per the documentation and the below error from the defaultValue when using moment js shows that the accepted format is day js
Type 'string' is not assignable to type 'Dayjs'.
To resolve above issue of showing date , follow below steps
Import dayjs
Using defaultvalue attribute, assign current date using dayjs
import React from "react";
import "./index.css";
import type { DatePickerProps } from "antd";
import { DatePicker, Space } from "antd";
//import moment from "moment";
import dayjs from "dayjs";
const onChange: DatePickerProps["onChange"] = (date, dateString) => {
console.log(date, dateString);
};
const format = "DD.MM.YYYY";
const App: React.FC = () => (
<Space direction="vertical">
<DatePicker onChange={onChange} format={format} defaultValue={dayjs()} />
</Space>
);
export default App;
Updated the codesandbox for your reference - https://codesandbox.io/s/basic-antd-5-1-7-forked-b87dbv?file=/demo.tsx
Documentation link for reference- https://ant.design/components/date-picker

How to set a default year datepicker react?

I am using react datepicker, I would like to set a default year(1990) when the calender is open, tried 'date', 'initialDate' prop but it is not working.
Here is my code :
const defaultYear = new Date("1990-01-01")
<LentoFormikDatePicker
name='date_of_birth'
label='Date of birth'
value={values.date_of_birth}
setFieldValue={setFieldValue}
maxDate={addYearsToDate(-18)}
minDate={addYearsToDate(-100)}
date={defaultYear}
/>

You can use react-date-picker and the sample working code for the functionality you asked is given below:
Sample Code
import React, { useState } from "react";
import logo from './logo.svg';
import './App.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
function App() {
// const defaultYear = new Date("1990-01-01")
const [defaultYear, setdefaultYear] = useState(new Date("1990-01-01"));
return (
<div className="App">
<header className="App-header">
<DatePicker
selected={defaultYear}
name='date_of_birth'
label='Date of birth'
onChange={(date) => setdefaultYear(date)}
// value={values.date_of_birth}
// setFieldValue={setdefaultYear}
// maxDate={addYearsToDate(-18)}
// minDate={addYearsToDate(-100)}
//date={defaultYear}
/>
</header>
</div>
);
}
export default App;
The below urls will help in getting more details about react date-picker.
https://kandi.openweaver.com/javascript/wojtekmaj/react-date-picker

Cannot get value from Material UI DatePicker

I'm new to react and now I wanna be able to have a reusable component for date input, but i cannot get the values back from the component to the register.
Here is my form code:
import React, { useState, useEffect } from "react";
import { useForm } from "react-hook-form";
import { Button } from "#mui/material";
import FDate from "../../Components/Forms/FDate";
function AltaArtista() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = async (data) => {
try {
console.log(data);
} catch (e) {}
};
return (
<div>
<FDate
label='Fecha de Nacimiento'
register={{ ...register("nacimiento", { required: true }) }}
/>
<Button variant='contained' type='submit'>
date input
</Button>
</form>
</div>
);
}
And here is my FDate component
import * as React from "react";
import { TextField } from "#mui/material";
import DatePicker from "#mui/lab/DatePicker";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
function Fdate(props) {
const [value, setValue] = React.useState(new Date());
const handleDate = (newValue) => {
setValue(newValue);
console.log(newValue);
};
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
label={props.label}
value={value}
onChange={handleDate}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
export default Fdate;
When I print newValue in handleDate I can get the time selected in datePicker, but the value that returns to the form is the date selected when the app starts and it doesn't change, any thoughts will be very much appreciated.

In your Fdate component, you're not using the register prop that you're passing it down from AltaArtista. Form state is controlled by the useForm hook and so you don't need to separately control it inside of 'Fdate'. But you should set the default (initial) value of nacimiento when declaring useForm
const {
register,
handleSubmit,
formState: { errors },
} = useForm({
defaultValues: {nacimiento: new Date()}
});
and then spread your props inside Fdate:
import * as React from "react";
import { TextField } from "#mui/material";
import DatePicker from "#mui/lab/DatePicker";
import AdapterDateFns from "#mui/lab/AdapterDateFns";
import LocalizationProvider from "#mui/lab/LocalizationProvider";
function Fdate(props) {
return (
<LocalizationProvider dateAdapter={AdapterDateFns}>
<DatePicker
{...props}
renderInput={(params) => <TextField {...params} />}
/>
</LocalizationProvider>
);
}
export default Fdate;

How to change the language for KeyboardDatePicker material ui?

I am currently using material ui on the web and I use the KeyboardDatePicker API and it works perfectly, but the names of the months and the text of the buttons are shown in English and I want to change them to Spanish. I read the API documentation but I can't find information about it.
Anyone know how to change the language?

Another solution which worked for me is using date-fns/locale/*. The documentation can be found here.
For example in german:
import {KeyboardDatePicker, MuiPickersUtilsProvider} from "#material-ui/pickers";
import DateFnsUtils from "#date-io/date-fns";
import deLocale from "date-fns/locale/de";
render () {
return
(
<MuiPickersUtilsProvider utils={DateFnsUtils} locale={deLocale}>
.
.
.
</MuiPickersUtilsProvider>
)
}
Result:

Try importing spanish moment locale and then using it in MuiPickersUtilsProvider:
import React from "react";
import ReactDOM from "react-dom";
import {
KeyboardDatePicker,
MuiPickersUtilsProvider
} from "#material-ui/pickers";
import MomentUtils from "#date-io/moment";
import "moment/locale/es";
import "./styles.css";
function App() {
return (
<div className="App">
<MuiPickersUtilsProvider locale="es" utils={MomentUtils}>
<KeyboardDatePicker />
</MuiPickersUtilsProvider>
</div>
);
}

For spanish the solution that worked for me is the following
import 'date-fns';
import React from 'react';
import { MuiPickersUtilsProvider, KeyboardDatePicker } from '#material-ui/pickers';
import FormControl from '#material-ui/core/FormControl';
import DateFnsUtils from '#date-io/date-fns';
import deLocale from "date-fns/locale/es";
import {useStyles} from './style';
export default function FormControlDate(props) {
const classes = useStyles();
return (
<FormControl className={classes.formControl} >
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils} >
<KeyboardDatePicker
disableToolbar
variant="inline"
format="dd/MM/yyyy"
margin="normal"
id={props.name}
name={props.name}
key={props.name}
label={props.label}
value={props.value}
onChange={date=>{
props.handleChange({"target":{"name":props.name,"value":date}})
}}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</FormControl>
)
}