<template>
<div
class="el-picker-panel el-date-range-picker"
:class="[{
'has-sidebar': $slots.sidebar || hasShortcuts,
'has-time': showTime
}]"
>
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div v-if="hasShortcuts" class="el-picker-panel__sidebar">
<button
v-for="(shortcut, key) in shortcuts"
:key="key"
type="button"
class="el-picker-panel__shortcut"
@click="handleShortcutClick(shortcut)"
>
{{ shortcut.text }}
</button>
</div>
<div class="el-picker-panel__body">
<div v-if="showTime" class="el-date-range-picker__time-header">
<span class="el-date-range-picker__editors-wrap">
<span class="el-date-range-picker__time-picker-wrap">
<el-input
size="small"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.startDate')"
class="el-date-range-picker__editor"
:model-value="minVisibleDate"
@input="val => handleDateInput(val, 'min')"
@change="val => handleDateChange(val, 'min')"
/>
</span>
<span v-clickoutside="handleMinTimeClose" class="el-date-range-picker__time-picker-wrap">
<el-input
size="small"
class="el-date-range-picker__editor"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.startTime')"
:model-value="minVisibleTime"
@focus="minTimePickerVisible = true"
@input="val => handleTimeInput(val, 'min')"
@change="val => handleTimeChange(val, 'min')"
/>
<time-pick-panel
:visible="minTimePickerVisible"
:format="timeFormat"
datetime-role="start"
:time-arrow-control="arrowControl"
:parsed-value="leftDate"
@pick="handleMinTimePick"
/>
</span>
</span>
<span class="el-icon-arrow-right"></span>
<span class="el-date-range-picker__editors-wrap is-right">
<span class="el-date-range-picker__time-picker-wrap">
<el-input
size="small"
class="el-date-range-picker__editor"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.endDate')"
:model-value="maxVisibleDate"
:readonly="!minDate"
@input="val => handleDateInput(val, 'max')"
@change="val => handleDateChange(val, 'max')"
/>
</span>
<span v-clickoutside="handleMaxTimeClose" class="el-date-range-picker__time-picker-wrap">
<el-input
size="small"
class="el-date-range-picker__editor"
:disabled="rangeState.selecting"
:placeholder="t('el.datepicker.endTime')"
:model-value="maxVisibleTime"
:readonly="!minDate"
@focus="minDate && (maxTimePickerVisible = true)"
@input="val => handleTimeInput(val, 'max')"
@change="val => handleTimeChange(val, 'max')"
/>
<time-pick-panel
datetime-role="end"
:visible="maxTimePickerVisible"
:format="timeFormat"
:time-arrow-control="arrowControl"
:parsed-value="rightDate"
@pick="handleMaxTimePick"
/>
</span>
</span>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-left">
<div class="el-date-range-picker__header">
<button
type="button"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"
@click="leftPrevYear"
></button>
<button
type="button"
class="el-picker-panel__icon-btn el-icon-arrow-left"
@click="leftPrevMonth"
></button>
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"
@click="leftNextYear"
></button>
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-right"
@click="leftNextMonth"
></button>
<div>{{ leftLabel }}</div>
</div>
<date-table
selection-mode="range"
:date="leftDate"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
:disabled-date="disabledDate"
:cell-class-name="cellClassName"
@changerange="handleChangeRange"
@pick="handleRangePick"
@select="onSelect"
/>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableYearArrow"
:class="{ 'is-disabled': !enableYearArrow }"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"
@click="rightPrevYear"
></button>
<button
v-if="unlinkPanels"
type="button"
:disabled="!enableMonthArrow"
:class="{ 'is-disabled': !enableMonthArrow }"
class="el-picker-panel__icon-btn el-icon-arrow-left"
@click="rightPrevMonth"
></button>
<button
type="button"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"
@click="rightNextYear"
></button>
<button
type="button"
class="el-picker-panel__icon-btn el-icon-arrow-right"
@click="rightNextMonth"
></button>
<div>{{ rightLabel }}</div>
</div>
<date-table
selection-mode="range"
:date="rightDate"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
:disabled-date="disabledDate"
:cell-class-name="cellClassName"
@changerange="handleChangeRange"
@pick="handleRangePick"
@select="onSelect"
/>
</div>
</div>
</div>
<div v-if="showTime" class="el-picker-panel__footer">
<el-button
v-if="clearable"
size="mini"
type="text"
class="el-picker-panel__link-btn"
@click="handleClear"
>
{{ t('el.datepicker.clear') }}
</el-button>
<el-button
plain
size="mini"
class="el-picker-panel__link-btn"
:disabled="btnDisabled"
@click="handleConfirm(false)"
>
{{ t('el.datepicker.confirm') }}
</el-button>
</div>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, PropType, ref, watch } from 'vue'
import { useLocaleInject } from '@element-plus/hooks'
import { extractDateFormat, extractTimeFormat, TimePickPanel } from '@element-plus/time-picker'
import { ClickOutside } from '@element-plus/directives'
import { isValidDatePickType } from '@element-plus/utils/validators'
import dayjs, { Dayjs } from 'dayjs'
import DateTable from './basic-date-table.vue'
import ElInp
a3737337
- 粉丝: 0
- 资源: 2869
最新资源
- 十一工具箱流量主小程序源码
- Jhipster7.9.3项目
- ssm104园区停车管理系统+jsp源码+论文.zip
- 基于YOLO5的目标识别系统和ROS无人小车结合形成的无人小车目标跟随系统python源码+文档说明.zip
- 大数据实战之环境搭建与集群配置详解
- 基于java的物流管理系统的设计与实现(论文+源码)-kaic.docx
- 基于nibiru开发的原生VR应用程序源码(沉浸式的VR体验).zip
- HengCe-18900-2024-2030全球与中国电涡流传感器市场现状及未来发展趋势 -样本.docx
- 基于Vue模仿高德区划导航实现
- HengCe-18900-2024-2030全球与中国含有抗菌肽的动物饲料市场现状及未来发展趋势-样本.docx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈