byronogis / datepicker-enhanced Goto Github PK

简体中文 | English

A date picker enhanced component for element-plus

Demo

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

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>

Vue-Component-Starter