SelectDate

简易介绍

selectDate日期选择器组件，用于用户选择日期或日期范围。
可以使用<MYSelect-date></MYSelect-date>或者<MYSelect-date />来实现一个日期选择器

基础用法

单日期选择器。

代码演示

<template>
    <MYSelect-date v-model='singleDate' />
</template>

展开代码

选择日期范围

使用range属性可以启用日期范围选择模式。

代码演示

<template>
    <MYSelect-date v-model='dateRange' range />
</template>

展开代码

单月选择器

使用month属性可以只选择月份。

代码演示

<template>
    <MYSelect-date v-model='singleMonth' month />
</template>

展开代码

月份范围选择器

使用range属性可以启用月份范围选择模式。

代码演示

<template>
    <MYSelect-date v-model='monthRange' range month />
</template>

展开代码

年份选择器

使用year属性可以只选择年份。

代码演示

<template>
    <MYSelect-date v-model='singleYear' year />
</template>

展开代码

年份范围选择器

使用range属性可以启用年份范围选择模式。

代码演示

<template>
    <MYSelect-date v-model='yearRange' year range />
</template>

展开代码

时间选择器

使用time属性可以启用时间选择。

代码演示

<template>
    <MYSelect-date v-model='datetime' time />
</template>

展开代码

组合使用

最后，实现个多种api组合使用实现个日期时间范围选择器：

代码演示

<template>
    <MYSelect-date 
        v-model='datetimeRange' 
        range 
        time 
        placeholder='选择日期时间范围'
    />
</template>

展开代码

API 参考

Props

参数	说明	类型	可选值	默认值
modelValue	绑定值	string | array	—	—
year	是否选择年份	boolean	—	false
month	是否选择月份	boolean	—	false
range	是否选择范围	boolean	—	false
time	是否选择时间	boolean	—	false
placeholder	占位文本	string	—	—

类型定义

interface SelectDateProps {
  modelValue?: string | string[];
  year?: boolean;
  month?: boolean;
  range?: boolean;
  time?: boolean;
  placeholder?: string;
}