A date picker enhanced component for element-plus
- New support for halfyear, quarteryear time point and year, halfyear and quarteryear time range selection
up to now
You can refer to DatePicker | Element Plus
*: extra support
- type:
halfyearquarteryearyearrangehalfyearrangequarteryearrange - modelValue / v-model: string | number | Date | (string | number | Date)[]
- readonly?: boolean = false
- disabled?: boolean = false
- editable?: boolean = true
- clearable?: boolean = true
- placeholder?: string = ''
- startPlaceholder?: string = ''
- endPlaceholder?: string = ''
- popperClass?: string = ''
- rangeSeparator?: string = '-'
- valueFormat?: string = ''
- prefixIcon?: Component | null = Calendar
- clearIcon?: Component | null = CircleClose
- disabledDate?: (date: Date) => boolean = () => false
- teleported?: boolean = false
- size?: 'large' | 'default' | 'small' = 'default'
- style?: StyleValue = ''
- *wantEnd?: boolean = false
- *allowSame?: boolean = true
By default, when a value is modified, the value passed is the starting value of the range，and you can get the end value by props of 'wantEnd'.
By default, the start and end values of the range can be the same, and you can set the value to false to not allow the same value.
- visibleChange: (visible: boolean)
- focus
- handleOpen
- handleClose
<script setup lang="ts">
import DatePickerEnhanced from 'datepicker-enhanced'
import 'datepicker-enhanced/dist/style.css'
import { ElDatePicker } from 'element-plus'
const extraType = ['halfyear', 'quarteryear', 'yearrange', 'halfyearrange', 'quarteryearrange']
const type = ref('halfyear')
</script>
<template>
<template v-if="extraType.includes(type)">
<DatePickerEnhanced v-model="value" :type="type" />
</template>
<template v-else>
<ElDatePicker v-model="value" :type="type" />
</template>
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent