SelectDate

Introduction

The selectDate date picker component is used for users to select a date or date range.
You can use <MYSelect-date></MYSelect-date> or <MYSelect-date /> to implement a date picker.

Basic Usage

Single date picker.

Code Demo

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

展开代码

Date Range Selection

Use the range prop to enable date range selection mode.

Code Demo

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

展开代码

Single Month Picker

Use the month prop to select only the month.

Code Demo

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

展开代码

Month Range Picker

Use the range prop to enable month range selection mode.

Code Demo

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

展开代码

Year Picker

Use the year prop to select only the year.

Code Demo

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

展开代码

Year Range Picker

Use the range prop to enable year range selection mode.

Code Demo

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

展开代码

Time Picker

Use the time prop to enable time selection.

Code Demo

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

展开代码

Combined Usage

Finally, here's an example combining multiple APIs to implement a date-time range picker:

Code Demo

<template>
    <MYSelect-date 
        v-model='datetimeRange' 
        range 
        time 
        placeholder='Select date and time range'
    />
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
modelValue	Bound value	string | array	—	—
year	Whether to select year	boolean	—	false
month	Whether to select month	boolean	—	false
range	Whether to select range	boolean	—	false
time	Whether to select time	boolean	—	false
placeholder	Placeholder text	string	—	—

Type Definitions

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