共1个回答
XL
游客xlRpUN
相关Props:
init
- Type:
Boolean
- Required:
false
- Default:
true
决定mounted
时组件的初始值,如果为true,初始值为start-date
,否者为输入框的v-model的默认值。
Star From Monday
- Type:
Boolean
- Required:
false
- Default:
false
决定日期选择器的一周的开始, monday
或 sunday
。
Star Date
- Type:
String
- Required:
false
- Default:
dayjs().format('YYYY-MM-DD')
如果 init
为true,默认的start-date
是 dayjs().format('YYYY-MM-DD')
,否者start-date
默认的是 null/empty
。决定开始的日期,在此之前的日期将不可选。
End Date
- Type:
String
- Required:
false
- Default:
undefined
决定结束日期,之后的日期不可选。
Format Date
- Type:
String
- Required:
false
- Default:
YYYY-MM-DD
日期格式。
Event Date
- Type:
Array
- Required:
false
- Default:
[]
定义日期选择器里的事件,需要带有date、description、description三个键的对象组成的数组。
:event-date=[
{
date: '2020-01-01',
description: 'Happy new year',
holiday: true,
},
{
date: '2020-02-14',
description: 'Happy valentine day',
holiday: false,
},
]
`
Inline
- Type:
Boolean
- Required:
false
- Default:
false
决定日期选择器是显示在行内还是作为一个下拉菜单显示。
Auto Close
- Type:
Boolean
- Required:
false
- Default:
true
决定日期选择器在选择日期后是否自动关闭。
Theme
- Type:
Object
- Required:
false
- Default:
:theme={
background: '#FFFFFF',
text: 'text-gray-700',
border: 'border-gray-200',
currentColor: 'text-gray-200',
navigation: {
background: 'bg-gray-100',
hover: 'hover:bg-gray-200',
focus: 'bg-gray-200',
},
picker: {
rounded: 'rounded-full',
selected: {
background: 'bg-red-500',
border: 'border-red-500',
hover: 'hover:border-red-500',
},
holiday: 'text-red-400',
weekend: 'text-green-400',
event: 'bg-indigo-500',
},
event: {
border: 'border-gray-200',
},
}
决定日期选择器的主题,相关颜色参见:tailwindcss。