<template>
|
<el-date-picker
|
v-model="dateValue"
|
type="daterange"
|
:range-separator="RANGE_SEPARATOR"
|
:start-placeholder="START_PLACEHOLDER"
|
:end-placeholder="END_PLACEHOLDER"
|
:shortcuts="shortcuts"
|
:value-format="valueFormat"
|
:disabled-date="disabledDate"
|
>
|
<template v-for="(value, name) in $slots" #[name]="slotData">
|
<slot :name="name" v-bind="slotData || {}"></slot>
|
</template>
|
</el-date-picker>
|
</template>
|
|
<script setup lang="ts">
|
import { ElDatePicker } from 'element-plus';
|
import { definePropType } from 'element-plus/es/utils/vue/props/runtime';
|
import { CURRENT_DAY, DEFAULT_FORMATS_DATE, END_PLACEHOLDER, RANGE_SEPARATOR, SHORTCUTS, START_PLACEHOLDER } from './constants';
|
|
const props = defineProps({
|
valueFormat: {
|
type: String,
|
default: DEFAULT_FORMATS_DATE,
|
},
|
shortcuts: {
|
type: Array,
|
default: () => [],
|
// default: SHORTCUTS
|
},
|
});
|
|
const dateValue = defineModel({
|
type: definePropType<[string, string]>(Array),
|
});
|
|
const disabledDate = (date: Date) => {
|
return date > CURRENT_DAY;
|
};
|
</script>
|
<style scoped lang="scss"></style>
|
