Customize Reactive Search DateRange - reactjs

How would I tackle the implementation of internationalized ReactiveSearch DateRange component? I need a custom date format ("dd.mm.yyyy") and translated Names of months.
<ReactiveBase
app="carstore-dataset"
credentials="4HWI27QmA:58c731f7-79ab-4f55-a590-7e15c7e36721">
<DateRange
componentId="DateSensor"
dataField="mtime"
title="DateRange"
defaultValue={{
start: new Date('2019-04-01'),
end: new Date('2019-04-07')
}}
placeholder={{
start: 'Start Date',
end: 'End Date'
}}
focused={true}
numberOfMonths={2}
queryFormat="date"
autoFocusEnd={true}
showClear={true}
showFilter={true}
filterLabel="Date"
URLParams={false}
/>
<div>
Hello ReactiveSearch!
</div>
</ReactiveBase>
Thanks.

Sorry for the delay in responding. DateRange internally uses DayPickerInput from react-day-picker and Date Component have a prop called dayPickerInputProps you can directly use it to send props directly to the internal component.
To format the UI Date you will need to use additional package and props. You can go over to this page: https://react-day-picker.js.org/docs/input/ and scroll to section called Change Date Format to understand better.
Here is a sample code snippet to format the UI:
Packages Required:
import dateFnsFormat from "date-fns/format";
import dateFnsParse from "date-fns/parse";
import { DateUtils } from "react-day-picker";
Code
function parseDate(str, format, locale) {
const parsed = dateFnsParse(str, format, { locale });
if (DateUtils.isDate(parsed)) {
return parsed;
}
return undefined;
}
function formatDate(date, format, locale) {
return dateFnsFormat(date, format, { locale });
}
const FORMAT = "dd/MM/yyyy"; // Your Format
<DateRange
componentId="DateSensor"
dayPickerInputProps={{
formatDate,
format: FORMAT,
parseDate
}}
dataField="date_from"
/>
You can check a working example over here: https://codesandbox.io/s/daterange-9qfvo
Hope this Helps!

Related

How to handel event onChange of react-date-range (Date range) when only select start date or end date

I have a component DateRange using react-date-range ,
Import :
import { Range, DateRange, RangeKeyDict } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';
Default value :
const [dateRangeValue, setDateRangeValue] = useState<Range>({
startDate: new Date(),
endDate: new Date(),
});
Fuction :
const handelOnchange = (itemRespon: Range): void => {
console.log('itemRespon,', itemRespon);
//Display start end date which was chosen
renderFooteDate(itemRespon);
//Set new date range value
setDateRangeValue(itemRespon);
//CallBackParrent to give data back
};
Component :
<DateRange
className={style.dateRangeWrapper}
editableDateInputs={true}
onChange={(item: RangeKeyDict): void => handelOnchange(item.selection)}
moveRangeOnFirstSelection={false}
ranges={[{ ...dateRangeValue, key: 'selection' }]}
months={2}
direction="horizontal"
/>
Picture :
Date
2.I hope i can get value when ever i chose only start date or end date , but currently it only active onChange event when i click both start and end date. I do not always need both start and end , sometimes i just need 1 of them is enough.
I tried to reproduce the error, but it works fine for me.
Please see example.
The only thing you have to do is to press Enter after changing the date, then the changes will be applied.

Why do I get "RangeError: date value is not finite in DateTimeFormat format()" when using Intl.DateTimeFormat in React?

I cannot see where the date format is being passed incorrectly to cause the RangeError?
I don't seem to be able to parse user.created. The user details are being brought in from a json response in reality, but I've shown them as a variable in this example.
Here's my MRE:
import * as React from "react";
function Details() {
const user = {
firstName: "Anthony",
created: "2020-08-19T23:13:44.514Z",
updated: "2020-09-12T00:31:31.275Z"
};
const userJoined = new Intl.DateTimeFormat("en-GB", {
year: "numeric",
month: "long",
day: "2-digit"
}).format(user.created.toString());
return (
<div>
<p>{user.firstName}</p>
<p>
Joined:
{new Intl.DateTimeFormat("en-GB", {
year: "numeric",
month: "long",
day: "2-digit"
}).format(userJoined)}
</p>
</div>
);
}
export { Details };
You may need to parse the string to date.
const user = {
firstName: "Anthony",
created: new Date("2020-08-19T23:13:44.514Z"),
updated: new Date("2020-09-12T00:31:31.275Z")
};
You get this when you pass an invalid date to format(). Make sure it is a Date().
import moment from "moment-timezone";
moment.utc(date).tz(browserTimezone).format();
I know most of these issues have been resolved in modern versions of browsers, but I just ran into a case where this error was caused by having milliseconds attached to the end of my dates like this --
'2022/10/25 11:22:42.570684', // .570684
This works well in Chrome but not in any other browser i.e. Safari.
After removing the milliseconds
'2022/10/25 11:22:42', // Works as expected, no milli seconds.
a link to the docs https://dygraphs.com/date-formats.html

Use the date picker to display date ranges - as opposed to picking

Is there any way to use the date picker to simply display blocked out date ranges as opposed actually allowing the user to pick date ranges.
A good example of the functionality I require is the availability display that Airbnb use for each property:
example
Solved this now. In the end, I did the following:
import { DayPickerSingleDateController } from 'react-dates';
....
const [focusedInput, setFocusedInput] = useState('startDate');
<DayPickerSingleDateController
...
onFocusChange={focusedInput => {
return true;
}}
...
>

Material-UI Datepicker can't display error/required messages

I am trying to show a validation error message on Date picker like how we do for TextField using errorText and errorStyle props but the validation error message is not working for DatePicker.
I am using material-ui version "^0.18.7".
Please find full functionality below. I am not sure exactly how to implement this. I also understand that the errorText and errorStyle is not a valid prop to DatePicker. Thought it will work for datepicker but it is not. Is there a way to achieve this.
import DatePicker from 'material-ui/DatePicker';
constructor(props){
super(props)
const dateYesterday = new Date();
dateYesterday.setDate(dateYesterday.getDate() - 1);
this.state={
dob: null,
dobError: '',
dateYesterday: dateYesterday
}
this.changeDateOfBirth = this.changeDateOfBirth.bind(this)
}
changeDateOfBirth = (evt, date) => {
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}else{
this.setState({
dobError: '',
dob: date
});
}
}
const errorStyle = {
display: 'table'
}
<DatePicker
dialogContainerStyle={{position: 'absolute'}}
errorText={this.state.dobError}
errorStyle={errorStyle}
inputStyle={myTheme.inputStyleText}
underlineStyle={myTheme.underlineStyle}
underlineFocusStyle={myTheme.underlineStyle}
floatingLabelStyle={myTheme.floatingLabelStyle}
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
Please suggest.
The DatePicker spreads props through to children elements, so you can in fact use the errorText and errorStyle props from the TextField element. For example, I tested the following DatePicker in "^0.18.7" and can confirm it shows up with a red error message:
<DatePicker hintText="Portrait Dialog" errorText="This is an error message." />
You should be aware that the onChange callback in the DatePicker is only fired when a date is selected, so the date argument will never be null or undefined. In other words, you'll never enter into the following if statement:
if(date == null || date == undefined){
this.setState({
dobError: 'Please select your date of birth'
});
}
If you want to check for cases in which the user has not set any kind of date, consider just checking whether or not your DOB is null (I left out the irrelevant props to keep things short):
<DatePicker
errorText={this.state.dob ? {} : this.state.dobError}
errorStyle={this.state.dob ? {} : errorStyle}
>

How to restrict date selection in React native ios/android datepicker

I would like to restrict users from selecting particular dates based on business logic in react native ios/ android date pickers. Currently in the document i only see that a min date and max date can be provided.
So is there a way to only restrict lets say (5 , 6, 10, 12 , 18) of a month?
Note: these dates are just an example would change from a case to case scenario
For IOS example
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={(date) => {
if(isAllowedDate(date)) {
this.setState({chosenDate: newDate})
}
else {
this.setState({error:'you can not select this date ...'})
}
}}
/>
use react-native-datepicker module for iOS and Android , set a method to check if date valid or not
render(){
return(
...
<DatePicker
mode="date"
placeholder="select date"
format="YYYY-MM-DD"
onDateChange={this.saveDateIfValid}
/>
...
)
}
saveDateIfValid = (date) =>
{
if(date){
let dateArray = data.split("-");
let validDays = [5,6,10,12,18];
let selectedDay = parseInt(dataArray[2]);
if(validDays.indexOf(selectedDay) > -1){
//date is valid
this.setState({date : date});
return; //end the method
}
}
//not valid
this.setState({date : null});
}

Resources