multi-func-picker
A multi-functional picker that can be time-picker, date-picker or custom-picker.
- 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
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. |
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. |
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 : ['思明区']}
]
}
]
method |
desc |
picker.then(callback) |
picker result callback. |
param |
type |
require |
default |
desc |
range |
String |
-- |
至 |
text of range to. |
cancel |
String |
-- |
取消 |
text of cancel btn. |
confirm |
String |
-- |
确定 |
text of confirm btn. |