Abstract-datepicker NPM

Abstract Date Picker

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. ⚠️

Installation

yarn add abstract-datepicker

Usage

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>
      </>
    )
  }
}

API

createDatePicker

Type: (?DatePickerOptions) => DatePicker
Default: {}

TODO: Quality description

DatePickerOptions

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)

DatePicker

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

DatePickerState

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)

DatePickerDate

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

date-fns dot-prop uuid

@everything-registry/sub-chunk-1090 @infinitebrahmanuniverse/nolb-abs @zalastax/nolb-abs

0.1.3

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago