Datepicker-enhanced NPM

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>