next-daterange-picker
v1.1.0
Published
A date range picker built using nextjs
Downloads
258
Maintainers
Readme
Next Daterange Picker
A Date Range Picker built with next.js and TypeScript
Features
- Mobile Support
- Click and drag calendar
- Select single date
- Select a date range over 1-2 months
- Define unavailable dates
- Prevention of dates being selected if they fall outside of the selectable range (determined by unavailable dates)
- Output date values to input elements
Demo
Try it out at https://oliversheldon.co.uk/next-daterange-picker.
Getting Started
Import the following:
import Calendar from 'next-daterange-picker/app/components/Calendar';
import 'next-daterange-picker/public/styles/calandar.scss'
import * as Moment from 'moment';
import { DateRange, extendMoment } from 'moment-range';
const moment = extendMoment(Moment);
The Calendar
element takes 3 optional parameters: getSelectedDates, dateStates and showTwoMonths.
getSelectedDates is a callback Function which will return the selected start and end date, on change, in the following format:
type Dates = {
start: Date,
end: Date
}
These dates can then be passed to input elements.
dateStates accepts an array of DateStates, which is used to pre highlight any date ranges. At the moment, this feature only supports one state: "unavailable", which will prevent users from selecting those dates. Note, this will not stop users from inputting invalid dates in any connected input elements. The DateStates type parameters are as follows: 'state: string, range: DateRange' See imports above. Here is an example of the type and implementation:
type DateStates = {
state: string,
range: DateRange
}
let dateStates: DateStates[] = [
{
state: 'unavailable',
range: moment.range(
moment().add(2, 'weeks').startOf('day'),
moment().add(2, 'weeks').add(5, 'days').endOf('day')
),
},
{
state: 'unavailable',
range: moment.range(
moment().add(4, 'weeks').add(1, 'days').startOf('day'),
moment().add(4, 'weeks').add(5, 'days').endOf('day')
),
},
{
state: 'unavailable',
range: moment.range(
moment().add(6, 'weeks').add(1, 'days').startOf('day'),
moment().add(6, 'weeks').add(5, 'days').endOf('day')
),
}
]
showTwoMonths is a boolean which determines how many calendar months are rendered. true = 2 months, false = 1 month.
For a full example, including input elements, see the page.tsx file at 'next-daterange-picker/app/page.tsx'.
Sponsorship
Like what you see? Please consider sponsoring my work via Github Sponsors.