multi-func-picker

A multi-functional picker that can be time-picker, date-picker or custom-picker.

Notes | 简体中文

• support：web-h5
• picker skin: You can change the skin by change the CSS.

Install

npm i multi-func-picker  or yarn add multi-func-picker

Useage

import 'multi-func-picker/dist/multi-func-picker.css'
import MultiFuncPicker from 'multi-func-picker'

/** time-picker **/
new MultiFuncPicker({
  type : 'time'
}).then((res)=>{
    console.log('single-time-result:', res);
});
new MultiFuncPicker({
  type : 'time',
  cur : ['08:08', '16:06']
}).then((res)=>{
    console.log('multiple-time-result:', res);
});

/** date-picker **/
new MultiFuncPicker({
  type : 'date'
}).then((res)=>{
    console.log('single-date-result:', res);
});
new MultiFuncPicker({
  type : 'date',
  cur : ['2020-08-08', '2021-06-09']
}).then((res)=>{
    console.log('multiple-date-result:', res);
});

/** custom-picker **/
new MultiFuncPicker({
  type : 'custom',
  data: data
}).then((res)=>{
    console.log('custom-result:', res);
});

examples

• examples/index.html

Configuration

• let picker = new MultiFuncPicker(options, lang)
• options
• time-picker | date-picker | custom-picker

| param | type | require | default | desc | | :----: | :----: | :----: | :----: | :---- | | options.type | String | -- | date | picker type. eg.time, date or custom. | | options.level | Number | -- | 3 | picker level. | | options.cur | String or Array | -- | -- | Initializes the selected state. If it has two initial values, it could be multiple picker, otherwise is single picker. | | options.maxWidth | Number | -- | 487 | picker max-width. |

• date-picker

| param | type | require | default | desc | | :----: | :----: | :----: | :----: | :---- | | options.range | Number | -- | 10 | before and after 10 years of the date-picker. | | options.minDate | String or Array | -- | -- | the begin of the date-picker. | | options.maxDate | String or Array | -- | -- | the end of the date-picker. |

• custom-picker

| param | type | require | default | desc | | :----: | :----: | :----: | :----: | :---- | | options.data | Array | -- | -- | data that show in the custom-picker. | | options.nameKey | String | -- | name | current level object-fields key. | | options.textKey | String | -- | text | current level string-fields key. | | options.listKey | String | -- | list | next level list-fields key. |

level === 1
@example
let data = [
    {code : 1002, text : '男'},
    {code : 1002, text : '女'}
]

//or
let data = ['男', '女']

level === 3
@example
let data = [
    {
      name : {code : 1002, text : '福建省'},
      list : [
          {
            name : {code : 2001, text : '厦门市'},
            list : [{code : 3001, text : '思明区'}]
          }
      ]
    }
]

//or
let data = [
    {
        name : '福建省',
        list : [
            {name : '厦门市', list : ['思明区']}
        ]
    }
]

• picker

| method | desc | | :----:| :---- | | picker.then(callback) | picker result callback. |

• lang

| param | type | require | default | desc | | :----: | :----: | :----: | :----: | :---- | | range | String | -- | 至 | text of range to. | | cancel | String | -- | 取消 | text of cancel btn. | | confirm | String | -- | 确定 | text of confirm btn. |