@ackmann-dickenson/slim-pickens 中文文档教程

Question

slim-pickens

React 的轻量级日期选择器实用程序。 使用我们的组件或轻松推出您自己的组件。 继续阅读。

Demo

http://outrageous-show.surge.sh/

Installation

npm

npm i --save @ackmann-dickenson/slim-pickens

yarn

yarn add @ackmann-dickenson/slim-pickens

Usage

我们公开了一些简单易用的日期选择器组件。 不喜欢他们？ 我们公开方法 让您轻松编写自己的自定义组件。

Pre-made Components

我们目前有一个简单的日历组件以及一个日期输入，如下所述。

SlimPickens

这是一个常规的日历控件。

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

SlimPickens 组件接受以下道具：

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

点击时打开日历控件的输入。 选择一个日期关闭日历并显示 输入中选定的日期值。

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

DateInput 组件接受与 SlimPickens 相同的属性，以及可选的 format 属性。

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

如果你不喜欢我们的，建立你自己的！ 你可以使用装饰器或继承，拿走你的选择！

Decorators

只需使用 slimPickens 装饰器装饰它，然后 它将注入您需要的所有属性：

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)

事实上，SlimPickens 预制组件就是用这个装饰器编写的。 我们邀请您查看 灵感来源！

Inheritance

您还可以继承自 SlimProto 组件。 这提供了与装饰器基本相同的界面， 有一些细微差别：

1. month and year will be members of this.state
2. previousMonth and nextMonth, previousYear, nextYear, rows, and selected will all be component methods