No Description

yhhu 006b23adcd docs: udpate readme 10 months ago
docs 164f144126 docs: update readme 10 months ago
example 93c727dd87 feat: publish npm package 10 months ago
lib 93c727dd87 feat: publish npm package 10 months ago
src 93c727dd87 feat: publish npm package 10 months ago
webpack 93c727dd87 feat: publish npm package 10 months ago
.babelrc 4e763d4c9e feat: complete date choose 11 months ago
.eslintrc a210a294d7 fix: fix some bugs & update readme 10 months ago
.gitignore 93c727dd87 feat: publish npm package 10 months ago
LICENSE cce2877c07 docs: update readme.md 11 months ago
README.md 006b23adcd docs: udpate readme 10 months ago
index.html 71e25f57eb feat: project basic skeleton created 11 months ago
package.json 93c727dd87 feat: publish npm package 10 months ago
postcss.config.js beb9cf97ba feat: add postcss feature 10 months ago
webpack.config.js 93c727dd87 feat: publish npm package 10 months ago
yarn.lock 93c727dd87 feat: publish npm package 10 months ago

README.md

datepicker

之前版本,可查看tag v1.0.0

$ git clone https://github.com/Rynxiao/datepicker.git
$ git tag
$ git checkout v1.0.0

重构之后版本

样式没有采用预处理器,而是使用CSS Modules,部分布局采用的是CSS Grid布局,因此在兼容性上请使用比较新的浏览器

关于CSS Modules以及CSS Grid可以查看我之前的两篇文章:

UI

参照 Ant Design,功能有所缩减

效果图

datepicker

支持功能

  • line模式
  • 禁止选择模式
  • 设置禁用起始日期以及结束日期
  • 基本选择日期功能
  • 年模式
  • 月模式

基本用法

// install package
npm install rt-datepicker@lastest
yarn add rt-datepicker@lastest

// datepicker
import DatePicker from 'rt-datepicker'

<DatePicker onSelectDate={day => console.log(day)} />

// inline
<DatePicker
  inline
  onSelectDate={day => console.log(day)}
/>

// default
<DatePicker
  defaultDate="2018-01-31"
  onSelectDate={day => console.log(day)}
/>

// placeholder
<DatePicker
  placeholder="please choose date"
  onSelectDate={day => console.log(day)}
/>

// disable
<DatePicker
  disable
  onSelectDate={day => console.log(day)}
/>

// disabale date
const disabledDate = current => (
  // start & end
  ['2018-01-02', current]

  // end
  // [current]
)

<DatePicker
  disabledDate={current => disabledDate(current)}
  onSelectDate={day => console.log(day)}
/>

// monthpicker
import DatePicker from 'rt-datepicker'
const { MonthPicker } = DatePicker

<MonthPicker
  disable
  inline
  placeholder="Select month"
  year="2018"
  month="01"
  onSelectMonth={month => console.log(month)}
/>

属性列表

DatePicker

属性 类型 释义
inline string 是否行展示
disable bool 禁止选择
disabledDate func 禁止选择日期的区间(返回一个数组)
defaultDate string 默认日期
placeholder string placeholder
onSelectDate func 选择日期后的回调

MonthPicker

属性 类型 释义
inline string 是否行展示
disable bool 禁止选择
year string 默认年份
month string 默认月份
placeholder string placeholder
onSelectMonth func 选择月份后的回调

node及npm版本

$ node -v 
v8.11.3

$ npm -v
v5.6.0

$ yarn -v
1.7.0

react版本

react v16.5.2

开发模式

yarn install
yarn start:dev

生产模式

yarn build