DatePickerEnhanced

简体中文 | English

A date picker enhanced component for element-plus

Demo

Features

• New support for halfyear, quarteryear time point and year, halfyear and quarteryear time range selection

API Support for New Date Type

up to now

You can refer to DatePicker | Element Plus

*: extra support

Attributes

• type: halfyear quarteryear yearrange halfyearrange quarteryearrange
• 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

wantEnd

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'.

allowSame

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.

Events

• visibleChange: (visible: boolean)

Methods

• focus
• handleOpen
• handleClose

Usage Example

<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>

Beginning with

Vue-Component-Starter