1.1.1 • Published 4 years ago
date-picker4mobile v1.1.1
安装
npm install date-picker4mobile --save
使用方法
import DatePicker from 'date-picker4mobile';
// 年份选择
// option 不传的话默认时间范围是2000-2030年
// value 年份的时候传一个一维数组,里面是年份,可以不穿默认为当前年份
// onConfirm 作为确定按钮的回调,将选择的年份传出,数据格式也是[2020]这样的,保证传入传出数据格式一致,所有的类型选择器都是一样
<DatePicker
type="year"
onConfirm={this.onConfirm}
option={{ min: 1900, max: 2050 }}
value={[2020]}
/>
// 月份选择
<DatePicker
type="month"
onConfirm={this.onConfirm}
option={{ min: 1900, max: 2050 }}
value={[2025, 10]}
/>
// 日期选择
// 传入传出的value是[date]
<DatePicker
type="day"
onConfirm={this.onConfirm}
option={{ min: 1900, max: 2050 }}
value={['2020-05-20']}
/>
// 范围选择器
// option: { isTodayLast: true }, // 默认以当前天数为最后一天,false就可以继续往后选,所有的类型都有
<DatePicker
type="range"
onConfirm={this.onConfirm}
title={<div>自定义</div>} // 可以不传,当需要自定义展示的内容时,可以手动传入
/> 传入传出的value是['2020-02-01', '2020-02-02']
onConfirm = (value) => {
console.log(value);
// 年份 [2020]
// 月份 [2020, 5]
// 日期 [ '2020-05-20' ]
// 范围 ['2020-05-01', '2020-05-20']
}
效果展示图
- 年份选择效果图
月份选择效果图
日期选择效果图
范围选择效果图