
slim-pickens
A lightweight date picker utility for React. Use our components or easily roll your own. Read on.
Demo
http://outrageous-show.surge.sh/
Installation
npm
npm i --save @ackmann-dickenson/slim-pickens
yarn
yarn add @ackmann-dickenson/slim-pickens
Usage
We expose some simple, usable datepicker components. Don't like 'em? We expose ways to
let you easily write your own custom components.
Pre-made Components
We currently feature a simple calendar component as well as a date input, described below.
SlimPickens
This is a regular calendar control.
import React, { Component } from 'react';
import { SlimPickens } from '@ackmann-dickenson/slim-pickens';
export default class App extends Component {
state = {
selected: '4/20/2016'
}
select = selected => this.setState({ selected })
render() {
return (
<SlimPickens onPick={this.select} value={this.state.selected} />
);
}
}
The SlimPickens
component accepts the following props:
Property Name | Type | Description |
---|
value | String | Date | The initially selected date. Can be a date object or a parsable date string. |
onPick | Function(Date) | Called with the chosen date when selected. |
DateInput
An input that opens a calendar control when clicked. Selecting a date closed the calendar and displays the
selected date value in the input.
import React, { Component } from 'react';
import { DateInput } from '@ackmann-dickenson/slim-pickens';
export default class App extends Component {
state = {
selected: '4/20/2016'
}
select = selected => this.setState({ selected })
render() {
return (
<DateInput onPick={this.select} value={this.state.selected} />
);
}
}
The DateInput
component accepts the same props as SlimPickens
, as well as an optional format
prop.
Property Name | Type | Description |
---|
value | String | Date | The initially selected date. Can be a date object or a parsable date string. |
onPick | Function(Date) | Called with the chosen date when selected. |
format | Function(Date) | Determines how to display the date in the input. Defaults to date => date.toLocaleString() . |
Custom Components
If you don't like ours, build your own! You can use decorators or inheritance, take your pickens!
Decorators
Just decorate it with the slimPickens
decorator and
it will inject all the properties you need:
Property Name | Type | Description |
---|
month | Integer | Calendar month (1-12) |
year | Integer | Calendar year (YYYY) |
previousMonth | Function | Decrement the calendar month |
nextMonth | Function | Increment the calendar month |
previousYear | Function | Decrement the calendar year |
nextYear | Function | Increment the calendar year |
rows | Array<Columns> | Row & column data containing date objects to populate the cells of the calendar |
selected | Date | The currently selected date |
export function MyCalendarComponent({ month, year, previousMonth, nextMonth, rows, selected }) {
return (
<table>
...
</table>
)
}
export default slimPickens(MyCalendarComponent)
In fact, the SlimPickens
premade component is written with this decorator. We invite you to look at the
source for inspiration!
Inheritance
You can also inherit from the SlimProto
component. This offers essentially the same interface as the decorator,
with some minor differences:
month
and year
will be members of this.state
previousMonth
and nextMonth
, previousYear
, nextYear
, rows
, and selected
will all be component methods