共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