DatePickerPanel 日期选择器面板 beta

DatePickerPanel 是 DatePicker 的核心组件，可以单独使用，将日期选择器直接嵌入到页面中。

import { createApp } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'

const app = createApp()
app.use(ElDatePickerPanel)

选择某一天

以「日」为基本单位，基础的日期选择控件。

<template>
  <el-date-picker-panel v-model="value" />
  <div class="demo-panel-value">当前值：{{ value }}</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'


const value = ref<Date>()
</script>

<style scoped>
.demo-panel-value {
  margin-top: 12px;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>

选择月份

通过 type="month" 选择月份。

<template>
  <el-date-picker-panel v-model="value" type="month" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'


const value = ref<Date>()
</script>

选择年份

通过 type="year" 选择年份。

<template>
  <el-date-picker-panel v-model="value" type="year" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'


const value = ref<Date>()
</script>

选择日期时间

通过 type="datetime" 选择日期与时间。

<template>
  <el-date-picker-panel v-model="value" type="datetime" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'


const value = ref<Date>()
</script>

选择日期范围

通过 is-range 与 type="daterange" 选择一段日期。

<template>
  <div class="demo-range">
    <el-date-picker-panel v-model="range" type="daterange" is-range />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DatePickerPanel as ElDatePickerPanel } from '@szhn/dh-design-pc'


const range = ref<[Date, Date]>()
</script>

<style scoped>
.demo-range {
  display: inline-block;
}
</style>

API

Attributes

属性名	说明	类型	默认值
model-value / v-model	选中项绑定值	Date / Date[] / string / number	—
type	显示类型	'date' | 'datetime' | 'week' | 'month' | 'year' | 'dates' | 'months' | 'years' | 'daterange' | 'datetimerange' | 'monthrange' | 'yearrange'	date
is-range	是否为范围选择	boolean	false
value-format	可选，绑定值的格式	string	—
date-format	可选，日期显示格式	string	—
time-format	可选，时间显示格式	string	—
default-value	可选，默认选中的值	Date / [Date, Date]	—
default-time	可选，范围选择的默认时间	Date / [Date, Date]	—
disabled	是否禁用	boolean	false
disabled-date	禁用日期的函数	Function	—
cell-class-name	为日期单元格自定义类名	Function	—
shortcuts	设置快捷选项	Array	—
show-now	是否显示"此刻"按钮	boolean	true
show-confirm	是否显示"确定"按钮	boolean	false
show-footer	是否显示底部	boolean	false
show-week-number	是否显示周数	boolean	false
arrow-control	是否使用箭头控制时间面板	boolean	false
unlink-panels	范围选择时是否禁用两个面板联动	boolean	false
clearable	是否可以清空	boolean	true
border	是否显示边框	boolean	true
editable	文本框是否可编辑	boolean	true

Events

事件名	说明	类型
update:modelValue	当绑定值变化时触发	Function
change	选中值变化时触发	Function