基础用法

基础用法

SunlightDatePicker 是基于 Element Plus DatePicker 的增强型日期选择器组件，支持多种日期类型和自定义配置。

基础日期选择

选择的日期: 暂无选择

选择年

选择的年份: 暂无选择

选择年月日时分秒

选择的日期时间: 暂无选择

月份选择

选择的月份: 暂无选择

多个时间选择

选择的多个日期: []

<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";

// 基础用法示例数据
const dateValue = ref("");
const yearValue = ref("");
const datetimeValue = ref("");
const rangeValue = ref([]);
const monthValue = ref("");
const multipleValues = ref([]);

const handleDateChange = (val: any) => {
  console.log("日期变化:", val);
};
</script>

<template>
  <div>
    <!-- 基础日期选择 -->
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">基础日期选择</div>
      <SunlightDatePicker
        v-model="dateValue"
        :item="{
          type: 'date',
          placeholder: '请选择日期',
          valueFormat: 'YYYY-MM-DD',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
            focusBoxShadow: '0 0 0 3px rgba(64, 158, 255, 0.25)',
          },
        }"
        @change="handleDateChange"
      />
      <p style="margin-top: 10px">选择的日期: {{ dateValue || "暂无选择" }}</p>
    </div>

    <!-- 选择年案例 -->
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">选择年</div>
      <SunlightDatePicker
        v-model="yearValue"
        :item="{
          type: 'year',
          placeholder: '请选择年份',
          valueFormat: 'YYYY',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
          },
        }"
        @change="handleDateChange"
      />
      <p style="margin-top: 10px">选择的年份: {{ yearValue || "暂无选择" }}</p>
    </div>

    <!-- 选择年月日时分秒案例 -->
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">选择年月日时分秒</div>
      <SunlightDatePicker
        v-model="datetimeValue"
        :item="{
          type: 'datetime',
          placeholder: '请选择日期时间',
          valueFormat: 'YYYY-MM-DD HH:mm:ss',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
          },
        }"
        @change="handleDateChange"
      />
      <p style="margin-top: 10px">选择的日期时间: {{ datetimeValue || "暂无选择" }}</p>
    </div>

    <!-- 月份选择案例 -->
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">月份选择</div>
      <SunlightDatePicker
        v-model="monthValue"
        :item="{
          type: 'month',
          placeholder: '请选择月份',
          valueFormat: 'YYYY-MM',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
          },
        }"
        @change="handleDateChange"
      />
      <p style="margin-top: 10px">选择的月份: {{ monthValue || "暂无选择" }}</p>
    </div>

    <!-- 多个时间选择案例 -->
    <div style="margin-bottom: 20px">
      <div style="margin-bottom: 8px">多个时间选择</div>
      <SunlightDatePicker
        v-model="multipleValues"
        :item="{
          type: 'dates',
          placeholder: '请选择多个日期',
          valueFormat: 'YYYY-MM-DD',
          wrapperStyle: {
            borderColor: '#c0c4cc',
            focusBorderColor: '#409eff',
          },
        }"
        @change="handleDateChange"
      />
      <p style="margin-top: 10px">选择的多个日期: {{ multipleValues || "暂无选择" }}</p>
    </div>
  </div>
</template>

<style scoped>
h3 {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
</style>

隐藏源代码

日期范围选择

通过设置 type: 'daterange' 开启日期范围选择功能。

-

选择的日期范围: []

<script setup lang="ts">
import { ref } from "vue";
import { SunlightDatePicker } from "sunlight-ui";

// 日期范围选择示例数据
const dateRangeValue = ref([]);
const handleDateRangeChange = (val: any) => {
  console.log("日期范围变化:", val);
};
</script>

<template>
  <div>
    <div style="margin-bottom: 20px">
      <SunlightDatePicker
        v-model="dateRangeValue"
        :item="{
          clearable: true,
          type: 'daterange',
          valueFormat: 'YYYY-MM-DD',
          wrapperStyle: {
            borderColor: '#409eff',
            focusBorderColor: '#409eff',
          },
          config: {
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期',
            unlinkPanels: true,
          },
        }"
        @change="handleDateRangeChange"
      />
    </div>
    <div>
      <p>选择的日期范围: {{ dateRangeValue || "暂无选择" }}</p>
    </div>
  </div>
</template>

<style scoped></style>

隐藏源代码

文档说明

组件简介

SunlightDatePicker 是一个基于 Element Plus DatePicker 组件增强的自定义日期选择器组件，提供了更丰富的配置选项和更好的用户体验。

核心功能

• 支持多种日期类型（日期、日期时间、日期范围等）
• 支持自定义日期格式
• 支持自定义边框、圆角和聚焦效果
• 提供丰富的事件支持

基础用法要点

1. 双向绑定：使用 v-model 实现数据双向绑定
2. 配置对象：通过 item 属性传递配置项
3. 日期类型：通过 type 属性设置日期选择器类型
4. 日期格式：通过 valueFormat 设置日期格式
5. 事件处理：支持直接监听事件或通过 eventFunction 配置

配置说明

SunlightDatePicker Props 配置项

属性名	说明	类型	默认值
modelValue	绑定值，支持双向数据绑定	string number Date array	null
item	日期选择器配置对象，包含各种属性和样式配置	object	{}

item 配置对象

属性名	说明	类型	默认值
disabled	是否禁用日期选择器	boolean	false
placeholder	日期选择器占位符	string	'请选择日期'
type	日期选择器类型	string	'date'
valueFormat	日期格式	string	'YYYY-MM-DD'
customClass	自定义样式类	string	-
customStyle	自定义内联样式	object	-
wrapperStyle	边框和样式配置对象	object	-
config	额外属性配置，支持传入任意属性	object	{}
eventFunction	事件处理函数对象	object	{}
slotNames	插槽名称数组	array	[]

日期类型说明

类型值	说明
date	日期选择器
datetime	日期时间选择器
daterange	日期范围选择器
datetimerange	日期时间范围选择器
month	月份选择器
year	年份选择器
dates	日期多选

wrapperStyle 配置对象

属性名	说明	类型	默认值
borderColor	日期选择器边框颜色	string	'#c0c4cc'
borderRadius	日期选择器圆角大小	string	'4px'
backgroundColor	日期选择器背景色	string	'inherit'
boxShadow	日期选择器阴影效果	string	'inherit'
focusBorderColor	聚焦时边框颜色	string	'#409eff'
focusBoxShadow	聚焦时阴影效果	string	'0 0 0 3px rgba(64, 158, 255, 0.15)'

事件说明

SunlightDatePicker 支持丰富的事件，您可以通过两种方式使用事件：

1. 直接在组件上使用 @eventName 语法监听事件
2. 通过 item.eventFunction 配置对象传递事件处理函数

支持的事件列表

事件名	说明	回调参数
change	当选择的值发生变化时触发	val: string/number/Date/Array - 选中的值
blur	当日期选择器失去焦点时触发	event: Event - 原生事件对象
focus	当日期选择器获得焦点时触发	event: Event - 原生事件对象
calendar-change	当日历面板的日期发生变化时触发	val: string/number/Date/Array - 当前日历面板显示的日期
visible-change	当弹出框出现/隐藏时触发	val: boolean - 弹出框是否可见
panel-change	当日期面板切换时触发	value: string/number/Date - 当前选中的值 mode: string - 当前面板模式 oldMode: string - 上一个面板模式

相关链接

• Element Plus DatePicker 文档