An abstract logic handler for rendering datepickers in any UI framework.
⚠️ WARNING: This package is still in need of heavy testing before it is ready for production use.⚠️
yarn add abstract-datepicker
The current intended use for this module is a business application that I work on which uses React for the front end. The below example describes how one would utilize this package in a React context.
import React from 'react';
import { createDatePicker } from 'abstract-datepicker';
import { Date, Button, Row, Week } from './styled';
class App extends React.Component {
constructor(props) {
super(props);
this.picker = createDatePicker({
groupByWeek: true,
});
this.state = {
monthName: '',
month: [],
};
}
componentDidMount() {
this.unsubscribe = this.picker.subscribe(({ month, monthName, year }) => {
this.setState({
month,
monthName,
year,
});
});
}
componentWillUnmount() {
this.unsubscribe();
}
incrementMonth = () => this.picker.incrementMonth();
decrementMonth = () => this.picker.decrementMonth();
render() {
const { monthName, year, month } = this.state;
return (
<>
<Row>
<Button onClick={this.decrementMonth}>Prev Month</Button>
<span>{monthName} {year}</span>
<Button onClick={this.incrementMonth}>Next Month</Button>
</Row>
<div>
{
month.map((week, idx) => (
<Week key={`${year}-${monthName}-week-${idx}`}>
{
week.map((day) => (
<Date
key={day.iso}
selected={day.selected}
>
{day.date}
</Date>
))
}
</Week>
))
}
</div>
</>
)
}
}
- Type:
(?DatePickerOptions) => DatePicker
- Default:
{}
TODO: Quality description
- Type:
Object
Params:
Name | Type | Description |
---|---|---|
groupByWeek | boolean |
When true, returns a 2D array where each top-level array represents a week beginning on Sunday in the month |
initialDate | Date | string |
The initial date the datepicker should utilize. The initial month will be calculated based on initialDate. Default: new Date() |
includeTrailers | boolean |
Often the first week of a month begins at the end of a previous month (e.g. July 2019 started on a Monday, leaving a trailing Sunday from the previous month). By default, "trailers" are included in the month. |
retainMonthsRadius | number |
(NOT YET IMPLEMENTED/UNDER CONSIDERATION) For potential gains (needs benchmarking), calculated months can be retained based on a radius of months relative the currently selected month. That is, a radius of 2 with a selected month of July would hold on to a previously calculated May, June, August and September. |
monthNameFormat | 'short' | 'long' |
(WILL LIKELY ABROGATE IN FAVOR OF A FORMATTER OR LEAVE UP TO THE CONSUMER) |
- Type:
Object
Params:
Name | Type | Description |
---|---|---|
subscribe | (DatePickerState) => () => void |
A function that will subscribe a callback to changes in the datepicker. The function returns a function that when called will unsubscribe the function from updates. |
incrementMonth | () => void |
Increment the current month forward |
decrementMonth | () => void |
Decrement the current month backward |
resetMonth | () => void |
Reset the current month to be inline with the currently selected date |
setDate | (Date) => void |
Set the selected date |
- Type:
Object
Params:
Name | Type | Description |
---|---|---|
month | Array<DatePickerDate> |
An array of dates to be rendered by the renderer |
selectedDate | Date |
The current selected date |
selectedMonth | Date |
The current selected month (may not align with date) |
- Type:
Object
Params:
Name | Type | Description |
---|---|---|
day | Date |
The day of the week to which the date belongs |
date | number |
The day of the month |
iso | string |
An ISO-8601 formatted date-time string in UTC |
obj | Date |
A native JS Date object |
selected | boolean |
Whether the date is the currently selected date |