I would like to use this date picker which can select a date and a range. I am trying to implement it in a form as part of my nextJS project.
However, I am not quite sure how to go about adding components into nextJS given the code online.
I have already done the npm install react-day-picker --save
import React from 'react';
import moment from 'moment';
import Helmet from 'react-helmet';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import 'react-day-picker/lib/style.css';
import { formatDate, parseDate } from 'react-day-picker/moment';
export default class Example extends React.Component {
constructor(props) {
super(props);
this.handleFromChange = this.handleFromChange.bind(this);
this.handleToChange = this.handleToChange.bind(this);
this.state = {
from: undefined,
to: undefined,
};
}
showFromMonth() {
const { from, to } = this.state;
if (!from) {
return;
}
if (moment(to).diff(moment(from), 'months') < 2) {
this.to.getDayPicker().showMonth(from);
}
}
handleFromChange(from) {
// Change the from date and focus the "to" input field
this.setState({ from });
}
handleToChange(to) {
this.setState({ to }, this.showFromMonth);
}
render() {
const { from, to } = this.state;
const modifiers = { start: from, end: to };
return (
<div className="InputFromTo">
<DayPickerInput
value={from}
placeholder="From"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { after: to },
toMonth: to,
modifiers,
numberOfMonths: 2,
onDayClick: () => this.to.getInput().focus(),
}}
onDayChange={this.handleFromChange}
/>{' '}
—{' '}
<span className="InputFromTo-to">
<DayPickerInput
ref={el => (this.to = el)}
value={to}
placeholder="To"
format="LL"
formatDate={formatDate}
parseDate={parseDate}
dayPickerProps={{
selectedDays: [from, { from, to }],
disabledDays: { before: from },
modifiers,
month: from,
fromMonth: from,
numberOfMonths: 2,
}}
onDayChange={this.handleToChange}
/>
</span>
<Helmet>
<style>{`
.InputFromTo .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
background-color: #f0f8ff !important;
color: #4a90e2;
}
.InputFromTo .DayPicker-Day {
border-radius: 0 !important;
}
.InputFromTo .DayPicker-Day--start {
border-top-left-radius: 50% !important;
border-bottom-left-radius: 50% !important;
}
.InputFromTo .DayPicker-Day--end {
border-top-right-radius: 50% !important;
border-bottom-right-radius: 50% !important;
}
.InputFromTo .DayPickerInput-Overlay {
width: 550px;
}
.InputFromTo-to .DayPickerInput-Overlay {
margin-left: -198px;
}
`}</style>
</Helmet>
</div>
);
}
}
https://react-day-picker.js.org/examples/input-from-to
however, I do not know how to implement this in my next.js components folder
Can anyone advise how i can possibly go about this?
I only know that components have to start like this:
const DateRange = () => {}
const DateRange = () => {}
is a functional component.
The Example component in the DatePicker example is a class based component.
You can either convert the class based component into a functional component, if you prefer that style, or use the class based component as it is by placing it inside a file, 'DateRangeComponent.js' in the components folder.
Then since it's being default exported, you can import it like:
import DateRange from "../components/DateRangeComponent"