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);
});
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 : ['思明区']}
]
}
]