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

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;
}}
...
>

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.

Disable specific date and dates before specific date in react js

I want to disable the dates before event date and event date. But not able to do .Please help to fix this out. Below I am sharing my code.
eventDate = newDate("2022-07-08");
const disableCustomDt = current => {
return !eventDate .includes(current.format('YYYY-MM-DD'));
}
<DatePicker timeFormat={false} isValidDate={disableCustomDt} />
You can refer to this answer
You can compare your current date with today and return true or false

Ant Design Calendar: How to Change the Day of Week Format

I'm using the Ant Design Calendar Component in my project and I have it set up as follows:
Currently the Day of Week format is dd. Eg. Su, Mo, Tu, etc.
Is it possible to change the format via props to ddd. Eg. Sun, Mon, Tue, etc.?
There is no support for changing that directly on ant design component,
but Ant Design under the hood is using moment which is using locale.weekdaysMin, so you can import moment and change them:
import moment from 'moment'
moment.updateLocale('en', {
weekdaysMin : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
});
Changing the configuration of moment will cause global changes. If you are absolutely sure you want all the stuff relying on moment's minimized English weekday names to be set to "Sun Mon Tue....", then that's fine, and you should go with Barry Michael Doyle's answer.
If you only want to apply this change to specific calendars, however, I'd recommend using the CSS ::after pseudoclass.
First, apply some class name to the calendar that you can use for CSS targeting.
import React from "react";
import { Calendar } from "antd";
export const App = () => <Calendar className="my-calendar" />;
Then you can add the extra letters using CSS:
/* adds 'n' after "Su"*/
.my-calendar table thead tr > th:nth-child(1)::after {
content: "n";
}
/* adds 'n' after "Mo"*/
.my-calendar table thead tr > th:nth-child(2)::after {
content: "n";
}
/* ... etc., etc., ....*/
.my-calendar table thead tr > th:nth-child(3)::after {
content: "e";
}
.my-calendar table thead tr > th:nth-child(4)::after {
content: "d";
}
.my-calendar table thead tr > th:nth-child(5)::after {
content: "u";
}
.my-calendar table thead tr > th:nth-child(6)::after {
content: "i";
}
.my-calendar table thead tr > th:nth-child(7)::after {
content: "t";
}
Note: If you need to support different languages, this solution would require you to set the class name dynamically based on language settings and have different sets of the above CSS for each language. For one or two languages that won't be too bad, but beyond that you might want to take a different approach.
You must first set the format using a variable:
const dateFormat = 'DDD/MM/YYYY';
and then in the DatePicker you point out that you are going to use a custom format:
<DatePicker format = {dateFormat} />
The other way is to render each cell of the Datepicker placing the number in custom form:
<DatePicker
format = {dateFormat}
dateRender = {(current) => {
const num = (current.toString().length < 2) ? "0" + current : current)
return (
{num}
)
}}
/>

react-datepicker sets initial date to 01-01-1970

I am trying to create a date field via react-datepicker with the initial date set to today.
I'm using react-datepicker and moment.js.
Problem is, that my date initially is 01-01-1970 and not today's date.
Here is my code:
<DatePicker
dateFormat="DD.MM.YYYY"
selected={this.convertTimestampToDate(this.props.event.startDate)}
onChange={this.handleStartDayChange}
/>
and:
private convertTimestampToDate(ts: number): any {
return moment(ts);
}
and:
private handleStartDayChange(selectedStartDay: any) {
this.setState({
selectedStartDay: selectedStartDay,
selectedEndDay: this.state.selectedEndDay
});
this.props.onUpdateEvent(updateEventStartDate(this.props.event, selectedStartDay.valueOf()));
}
Created the date via moment.js.
that solved my problem.

react-datetime-YouCanBookMe error time and update state

I'using this library for react time picker: https://github.com/YouCanBookMe/react-datetime
But now I have 2 problems.
The time (Am, Pm, HH:mm) in timepicker doesnt'work , because it doesn't change, it remain to 12 : 00 AM
How correctly update state? because if I handle onChange (input manual write), it receive string, that I can't parse and it is invalid date.
My code is:
import DateTime from 'react-datetime';
var moment = require('moment');
handleChangeDate(propertyName, date) {
const event = Object.assign({}, this.state.event);
if (typeof date === 'string') {
date = moment(date);
}
event[propertyName] = data.format('DD/MM/YYYY HH:mm');
this.setState({ event: event });
}
and in Render() I have compoment:
<DateTime dateFormat={"dddd, MMM. Do YYYY, HH:mm (hh:mm a)"} value={this.state.event.to} onChange={this.handleChangeDate.bind(this, 'to')}/>
What is wrong?
check in below link.
Customized calendar will solve your problem.
https://github.com/YouCanBookMe/react-datetime#customize-the-appearance
After choose date in calendar then click on date. It will show the edit option for time.
Example Link
https://codepen.io/simeg/pen/YppLmO
Let it try

Resources