I'm trying to translate the component React DatePicker. But, I'm getting an error when trying to do this.
My code so far:
import DatePicker, { registerLocale } from 'react-datepicker';
const MONTHSDATE = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
const DAYSDATE = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
registerLocale('ptBR', {
localize: {
month: n => MONTHSDATE[n],
day: n => DAYSDATE[n]
},
formatLong: {}
});
<DatePicker
selected={realizedDateFrom}
onChange={(date) => setRealizedDateFrom(date)}
placeholderText={translate.t("activity_report_realized_from")}
className="MuiInputBase-root MuiFilledInput-root activity-report-datepicker"
dateFormat={'dd/MM/yyyy'}
showMonthDropdown
showYearDropdown
formatWeekDay={nameOfDay => nameOfDay.substr(0, 3)}
locale={translate.t("datapicker_translate")} //using translate getting word 'ptBR' for portuguese and 'en' for english
/>
When I change the language, this code works well just when i pick the date from calendar...
But when I try to write/input from the keyboard I get this error
The source code from this component is --> Project: https://github.com/Hacker0x01/react-datepicker
You can use date-fns for ptBR. (Basically, the error is because the calendar needs more translations than the one which you write).
So, the recommended is to use them from date-fns, one example would be:
import React from "react";
import DatePicker from "react-datepicker";
import { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { en, ptBR } from "date-fns/locale";
registerLocale("ptBR", ptBR);
registerLocale("en", en);
export default function App() {
const [language, setLanguage] = React.useState("ptBR");
return (
<div className="App">
<h3>Change the Language ({language})</h3>
<DatePicker locale={language} />
<button onClick={() => setLanguage("ptBr")}>ptBr</button>
<button onClick={() => setLanguage("en")}>eng</button>
</div>
);
}
The example is running on CodeSandbox: https://codesandbox.io/s/empty-browser-yfvg7?file=/src/App.js
Related
I want to show the datepicker year list in Descending order but am unable to do. It shows min date at first and then goes down to the max date.
The code I wrote is written below.
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DatePicker
views={['year', 'month']}
label="Month"
value={selectedDate}
onChange={(value) => setSelectedDate(value)}
animateYearScrolling
minDate={'01-01-2000'}
maxDate={new Date()}
/>
</MuiPickersUtilsProvider>
You can refer to this implementation on codesandbox to achieve the above mentioned descending order of years in datepicker. If you want more information on this, refer to this feature request thread on github.
import React from "react";
import { MuiPickersUtilsProvider } from "material-ui-pickers";
import MomentUtils from "#date-io/moment";
import { DatePicker } from "material-ui-pickers";
import moment from "moment";
moment.locale();
class LocalizedUtils extends MomentUtils {
getYearRange(start, end) {
const startDate = this.moment(end).startOf("year");
const endDate = this.moment(start).endOf("year");
const years = [];
let current = startDate;
while (current.isAfter(endDate)) {
years.push(current);
current = current.clone().subtract(1, "year");
}
return years;
}
}
class App extends React.Component {
state = { date: new Date() };
handleDateChange = date => {
this.setState({ date });
};
render() {
return (
<MuiPickersUtilsProvider utils={LocalizedUtils}>
<DatePicker
clearable
onChange={this.handleDateChange}
showTabs={false}
variant="outlined"
minDate={new Date("01-01-1900")}
/>
</MuiPickersUtilsProvider>
);
}
}
export default App;
I am passing a plain date as string from api, something like 2022-04-24, but on front react, it is parsing the date to the local timezone, which I don't want to be parsed to local timezone. My code on react looks like:
import { useForm, Controller } from "react-hook-form";
import { yupResolver } from "#hookform/resolvers/yup";
import * as Yup from "yup";
import ReactDatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export function App() {
const schema = Yup.object({});
const {
register,
handleSubmit,
formState: { errors },
control
} = useForm({
resolver: yupResolver(schema)
});
const onSubmit = async (input) => {
console.log("input", input);
};
const item = {
id: 12,
release_date: "2022-04-24"
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<Controller
control={control}
name="release_date"
defaultValue={item.release_date ? new Date(item.release_date) : null}
render={({ field: { onChange, onBlur, value, ref } }) => (
<ReactDatePicker
onChange={onChange}
onBlur={onBlur}
className="form-control w-full"
dateFormat="MMM dd, yyyy"
selected={value}
/>
)}
/>
<input type="submit" />
</form>
);
}
Here is the screenshot,
Currently, it is showing apr 23, even when I had passed it 04-24. To see the issue, you might have to use some different timezone (where still current date is apr 23).
And, here is the sandbox
There is a different when you use - and /
const date1 = new Date("2022/04/24");
const date2 = new Date("2022-04-24");
document.getElementById("app").innerHTML = `
<h4>${date1}</h4>
<h4>${date2}</h4>
`;
<div id="app">
</div>
https://codesandbox.io/s/date-object-qqjnrs
Luxon implementation: (from the same people who build moment)
https://moment.github.io/luxon/#/?id=luxon
// leave it as a string
const date1 = "2022-04-24";
const date2 = "2022/04/24";
const date1Result = luxon.DateTime.fromFormat(date1, "yyyy-M-dd").toJSDate()
const date2Result = luxon.DateTime.fromFormat(date, "yyyy/M/dd").toJSDate()
console.log({date1Result, date2Result})
(note, in moment js the solution would be similar.)
You can see for yourself by going to the luxon website and writing these lines in the dev tools console.
https://moment.github.io/luxon/#/?id=luxon
I am working on a React application and currently have a date picker to select a date range using Ant Design. I want to store the value of the selected date into a variable that can be accessed by another file in my program. How can I bind the selected value into a variable? Here is the JavaScript code for my date picker:
<p>Select a date range: </p>
</div>
<div className="left">
<Space direction="vertical" size={12}>
<RangePicker
format="YYYY-MM-DD"
onChange={this.onChange}
onOk={onOk}
/>
</Space>
Check the following example, You can store the date values in a variable once the date is selected and onChange function is called.
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { DatePicker, Space } from 'antd';
import 'antd/dist/antd.css';
import './index.css';
const { RangePicker } = DatePicker;
const Demo = () => {
let selecteddate;
let selectedstartdate;
let selectedenddate;
const onChange = (value) => {
selecteddate = value;
selectedstartdate = value[0];
selectedenddate = value[1];
//Pass the following values
console.log("selecteddate:",selecteddate);
console.log("selectedstartdate:",selectedstartdate);
console.log("selectedenddate:",selectedenddate);
};
return (
<>
<p>Select a date range: </p>
<Space direction="vertical" size={12}>
<RangePicker format="YYYY-MM-DD" onChange={onChange} />
</Space>
</>
);
};
export default Demo
Screenshot
I am stuck with an issue. I am not able to hide and show the react-date-range picker on date selection. Actually, I am using a package for date range selection, Here's the package link - https://www.npmjs.com/package/react-date-range.
This package does not support hiding the date picker once the date range picker is selected. But according to my requirement, the date picker should be visible once the user clicks on the start date or selected date input and should close once the end date is selected.
I have used a state to toggle the view of the date range picker to show it once the user clicks on the input field and closes it on the onChange event. But when ver the user clicks on the date picker it closes since the onChange event is triggered.
Here's my code for a better understanding
import React from 'react'
// import date-range-picker css
import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRangePicker } from 'react-date-range';
export interface IDateRangePickerProps {
range: any[],
onChange: (range: any) => void
}
const CustomDateRangePicker: React.FC<IDateRangePickerProps> = ({ range, onChange }) => {
const TODAY = new Date();
return (
<DateRangePicker
months={2}
minDate={TODAY}
direction="horizontal"
ranges={range}
onChange={onChange}
/>
)
}
export default CustomDateRangePicker;
In the above code, we have created a component to make the react-date-range picker easier to reuse throughout the application.
Here's the implementation of the react-date-range picker
import React, { useEffect, useState } from "react";
import CustomDateRangePicker from "../../components/daterangepicker/DateRangePicker";
import { format } from "date-fns";
const PropertyRoomTypes = () => {
const [showDateRangePicker, setShowDateRangePicker] = useState(false);
const [selectionRange, setSelectionRange] = useState<any[]>([{
startDate: null,
endDate: null,
key: 'selection',
}]);
const onDateRangeChange = (range: any) => {
setSelectionRange([range.selection])
if (selectionRange[0].startDate && selectionRange[0].endDate) {
setShowDateRangePicker(false);
}
}
const formatDate = (date: any) => {
if (date) {
let res = format(new Date(date), "dd MMM yyyy");
return res;
} else {
return;
}
}
return (
<>
<div className="add__room__type__meal__plan__wrapper px-0 mx-0">
<div className="room__rates__edit__date__range__picker" onClick={() => setShowDateRangePicker(!showDateRangePicker)}>
<div className="date__range__picker__icon"><i className="bi bi-calendar"></i></div>
<div className="date__range__label">{`${selectionRange[0].startDate && selectionRange[0].endDate ? formatDate(selectionRange[0].startDate) + " | " + formatDate(selectionRange[0].endDate) : "Select Dates"}`}</div>
{/* <div className="date__range__label">Select Dates</div> */}
</div>
{showDateRangePicker &&
<CustomDateRangePicker
range={selectionRange}
onChange={onDateRangeChange}
/>
}
</div>
</>
);
};
export default PropertyRoomTypes;
Any help would be much appreciated.
When user do first selection, both dates are the same...
So, you should compare it... something like that:
useEffect(() => {
if (selectionRange.startDate !== selectionRange.endDate) {
showDateRangePicker(false);
}
}, [selectionRange]);
I am using Material Ui DateTime picker in a form. After submitting the form, I get the following error:
Invalid Date Format
Image
I am using JSON Server in my react app for saving data.
This is the output Element for the DateTime picker on DOM.
<input aria-invalid="false" readonly="" type="text" class="MuiInputBase-input MuiInput-input" value="March 16th 08:50 a.m.">
This is data on db.json.
{
"text": "study",
"day": "2022-03-16T05:20:00.000Z",
"reminder": true,
"id": 1
}
This is my code for Add date.
import { useState } from "react";
import DateFnsUtils from "#date-io/date-fns";
import { MuiPickersUtilsProvider } from "#material-ui/pickers";
import "date-fns";
import { DateTimePicker } from "#material-ui/pickers";
const AddTask = ({ onAdd }) => {
const [day, setDay] = useState(new Date());
const onSubmit = (e) => {
e.preventDefault();
onAdd({ day });
setDay("");
};
return (
<form className="add-form" onSubmit={onSubmit}>
<div className="form-control">
<label>Day & time</label>
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<DateTimePicker
disableToolbar
variant="inline"
value={day}
onChange={(day) => {
setDay(day);
}}
autoOk
/>
</MuiPickersUtilsProvider>
</div>
</form>
);
};
I would appreciate it if you help me. Thanks
It will probably not break if you remove the setDay(""); line from onSubmit. Why do you need it after all?