Element Plus 实例详解（三）

___Date Picker 日期选择

文章目录：

一、前言

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

 2、安装Element Plus

三、Element Plus DatePicker 日期选择器功能

1、选择某一天

2、选择年、月、周、1个或多个日期

3、选择一段时间（日期范围选择）

四、官方资料中的各参数说明

五、总结

一、前言

 　　声明：不断有人冒我网名，自行转载我博客文章到其他地方，未免被其他的假鬼李鬼冒名造成不必要损失，现公布一下我个人的真实资料：我姓李，是奶奶级别的老。。。老姐姐，今年50岁了，女，广州。

　　我只有一个博客：csdn:  逆境清醒的博客_CSDN博客-python,前端特效实例源码,python turtle绘图集锦领域博主,https://blog.csdn.net/weixin_69553582?type=blog其他以逆境清醒自居的都是冒名的。除了在csdn上公开交流外（csdn博客留言，csdn动态），其他任何地方我都不会和别人有任何私下联系，请留意分辨真伪（包括在csdn用我账号登录的）。

逆境清醒

2023年3月25日

　　Element Plus 组件里Date Picker 日期选择，是常用的日期选择组件，用于选择或输入日期，提供了日期选择的基础用法、选择某一天、选择年、月、周、1个或多个日期、文选择一段时间（日期范围选择）等功能，本篇里我们一起来试用一下Element Plus 组件里Date Picker 日期选择组件。

二、搭建Element Plus试用环境

 1、搭建Vue3项目（基于Vite + Vue）

　　安装时请选择支持Typescript，本实例我安装在（C:\00program\vue\vuelearn\vueviteproject1）目录中，具体方法详见下面文章：

vue3 项目搭建教程（基于create-vue，vite，Vite + Vue）https://blog.csdn.net/weixin_69553582/article/details/129630880

 安装完成后打开浏览器：http://localhost:5173/  ,能正常显示以下页面：

 2、安装Element Plus

  • NPM：npm install element-plus --save

详细参考：

Element Plus 实例详解系列（一）__安装设置icon-default.png?t=N7T8https://blog.csdn.net/weixin_69553582/article/details/129701286

三、Element Plus DatePicker 日期选择器功能

在 SSR 场景下，

需要将组件包裹在 <client-only></client-only> 之中 (如: Nuxt) 和 SSG (e.g: VitePress).

1、选择某一天

  • 以”日“为基本单位，基础的日期选择控件
  • 基本单位由 type 属性指定。
  • 通过 shortcuts 配置快捷选项， 通过 disabledDate 函数，来设置禁用掉的日期。

 实现效果：通过Element Plus DatePicker 日期选择器，选择某一天日期 (带快速选项)

​

​

​

​

完整代码：


<template>

    <div class="demo-date-picker">

        <div class="block">
            <span class="demonstration">选择某一天 (带快速选项)</span>
            <el-date-picker v-model="value1"
                            type="date"
                            placeholder="选择某一天"
                            :disabled-date="disabledDate"
                            :shortcuts="shortcuts"
                            :size="size" />
            <br /><br />
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'

    const size = ref<'default' | 'large' | 'small'>('default')

    const value1 = ref('')

    const shortcuts = [
        {
            text: 'Today',
            value: new Date(),
        },
        {
            text: 'Yesterday',
            value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                return date
            },
        },
        {
            text: 'A week ago',
            value: () => {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                return date
            },
        },
    ]

    const disabledDate = (time: Date) => {
        return time.getTime() > Date.now()
    }
</script>

<style scoped>
    import './style.css'
    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        background-color: #ffffff;
    }

    .demo-date-picker .block {
        padding: 0px 10px;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
        //background-color: #ffffff;
        border: 3px solid #535bf2;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

        .demo-date-picker .block:last-child {
            border-right: none;
            background-color: #ffffff;
        }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 10px;
        color: #ffffff;
        background-color: #535bf2;
        line-height: 30px;
        padding: 0px 10px;
    }


</style>

2、选择年、月、周、1个或多个日期

实现效果：

​

​

 完整代码：


<template>
    <div class="demo-date-picker">
        <div class="container">
            <div class="block">
                <span class="demonstration">年  份</span>
                <el-date-picker v-model="value3"
                                type="year"
                                placeholder="选择年份" />
            </div>
            <br />
            <div class="block">
                <span class="demonstration">月  份</span>
                <el-date-picker v-model="value2"
                                type="month"
                                placeholder="选择月份" />
            </div>
            <br />
            <div class="block">
                <span class="demonstration">星  期</span>
                <el-date-picker v-model="value1"
                                type="week"
                                format="[Week] ww"
                                placeholder="选择星期" />
            </div>
            <br />
            <div class="block">
                <span class="demonstration">日  期</span>
                <el-date-picker v-model="value4"
                                type="dates"
                                placeholder="选择一个或多个日期" />
            </div>
            <br />
        </div>
    </div>
</template>
<script lang="ts" setup>
    import './styleElementPlus.css'
    import { ref } from 'vue'

    const value1 = ref('')
    const value2 = ref('')
    const value3 = ref('')
    const value4 = ref('')
</script>
<style scoped>

    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        background-color: #ffffff;
    }

        .demo-date-picker .block {
            padding: 0px 10px;
            text-align: center;
            border-right: solid 2px var(--el-border-color);
            flex: 1;
        }

            .demo-date-picker .block:last-child {
                border-right: none;
            }

        .demo-date-picker .container {
            flex: 1;
            border: 3px solid #535bf2;
            box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
        }

            .demo-date-picker .container .block {
                border-right: none;
            }

                .demo-date-picker .container .block:last-child {
                    border-top: solid 1px var(--el-border-color);
                }

            .demo-date-picker .container:last-child {
                border-right: none;
            }

        .demo-date-picker .demonstration {
            display: block;
            color: var(--el-text-color-secondary);
            font-size: 14px;
            margin-bottom: 20px;
            color: #ffffff;
            background-color: #535bf2;
            line-height: 30px;
            padding: 0px 10px;
        }

</style>

<style scoped>
    .logo {
        height: 6em;
        padding: 1.5em;
        will-change: filter;
        transition: filter 300ms;
    }

        .logo:hover {
            filter: drop-shadow(0 0 2em #646cffaa);
        }

        .logo.vue:hover {
            filter: drop-shadow(0 0 2em #42b883aa);
        }
</style>

3、选择一段时间（日期范围选择）

  • 在选择日期范围时，默认情况下左右面板会联动。
  • 如果希望两个面板各自独立切换当前月份，可以使用 unlink-panels 属性解除联动。

实现效果：

​

​

​

​

 完整代码：


<template>
    <div class="demo-date-picker">
        <div class="block">
            <span class="demonstration">选择一段日期范围  (带快速选项)</span>
            <el-date-picker v-model="value1"
                            type="daterange"
                            unlink-panels
                            range-separator="To"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :shortcuts="shortcuts"
                            :size="size" />
            <br /><br />
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref } from 'vue'


    const value1 = ref('')

    const shortcuts = [
        {
            text: 'Last week',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
            },
        },
        {
            text: 'Last month',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
            },
        },
        {
            text: 'Last 3 months',
            value: () => {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
            },
        },
    ]
</script>

<style scoped>
    import './style.css'
    .demo-date-picker {
        display: flex;
        width: 100%;
        padding: 0;
        flex-wrap: wrap;
        background-color: #ffffff;
    }

    .demo-date-picker .block {
        padding: 0 10px;
        text-align: center;
        border-right: solid 1px var(--el-border-color);
        flex: 1;
        border: 3px solid #535bf2;
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    }

        .demo-date-picker .block:last-child {
            border-right: none;
            background-color: #ffffff;
        }

    .demo-date-picker .demonstration {
        display: block;
        color: var(--el-text-color-secondary);
        font-size: 14px;
        margin-bottom: 20px;
        color: #ffffff;
        background-color: #535bf2;
        line-height: 30px;
        padding: 0px 10px;
    }
</style>

详细的数据类型，请查看下表


interface DateCell {
  column: number
  customClass: string
  disabled: boolean
  end: boolean
  inRange: boolean
  row: number
  selected: Dayjs
  isCurrent: boolean
  isSelected: boolean
  start: boolean
  text: number
  timestamp: number
  date: Date
  dayjs: Dayjs
  type: 'normal' | 'today' | 'week' | 'next-month' | 'prev-month'
}

四、官方资料中的各参数说明

Attributes

属性名说明类型可选值默认值

model-value /

v-model

绑定值，如果它是数组，长度应该是 2Date / number / string / Array——
readonly只读boolean—false
disabled禁用boolean—false
size输入框尺寸stringlarge/default/smalldefault
editable文本框可输入boolean—true
clearable是否显示清除按钮boolean—true
placeholder非范围选择时的占位内容string——
start-placeholder范围选择时开始日期的占位内容string——
end-placeholder范围选择时结束日期的占位内容string——
type显示类型string

year/month/

date/dates/

datetime/week/

datetimerange/

daterange/

monthrange

date
format显示在输入框中的格式stringYYYY-MM-DD
popper-classDatePicker 下拉框的类名string——
popper-options自定义 popper 选项，object——
range-separator选择范围时的分隔符string—'-'
default-value可选，选择器打开时默认显示的时间Date / [Date, Date]——
default-time范围选择时选中日期所使用的当日内具体时刻Date / [Date, Date]——
value-format可选，绑定值的格式。 不指定则绑定值为 Date 对象string—
id等价于原生 input id 属性string / [string, string]——
name等价于原生 input name 属性string——
unlink-panels在范围选择器里取消两个日期面板之间的联动boolean—false
prefix-icon自定义前缀图标string | Component—Date
clear-icon自定义清除图标string | Component—CircleClose
validate-event是否触发表单验证boolean—true
disabled-date一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。function——
shortcuts设置快捷选项，需要传入数组对象Array<{ text: string, value: Date | Function }>——
cell-class-name设置自定义类名Function(Date)——
teleported是否将 date-picker 的下拉列表插入至 body 元素booleantrue / falsetrue

Events

事件名说明回调参数
change用户确认选定的值时触发(val: typeof v-model)
blur在组件 Input 失去焦点时触发(e: FocusEvent)
focus在组件 Input 获得焦点时触发(e: FocusEvent)
calendar-change如果用户没有选择日期，那默认展示当前日的月份。 你可以使用 default-value 来设置成其他的日期。(val: [Date, Date])
panel-change当日期面板改变时触发。(date, mode, view)
visible-change当 DatePicker 的下拉列表出现/消失时触发(visibility: boolean)

Methods

方法名说明参数
focus使 input 获取焦点—
handleOpen打开日期选择器弹窗—
handleClose关闭日期选择器弹窗—

Slots

插槽名说明
default自定义内容
range-separator自定义范围分割符内容

 五、总结

  1

Element Plus 实例详解（一）__安装设置
2Element Plus 实例详解（二）___Button 按钮
3Element Plus 实例详解（三）___Date Picker 日期选择
4Element Plus 实例详解（四）___Border 边框
5Element Plus 实例详解（五）___Scrollbar 滚动条
6Element Plus 实例详解（六）___Progress 进度条
7Element Plus 实例详解（七）___Typography 排版
8Element Plus 实例详解（八）___Radio 单选框
9Element Plus 实例详解（九）___
10Element Plus 实例详解（十）___
11Element Plus 实例详解（十一）___
12Element Plus 实例详解（十一）___

         推荐阅读：

31Element Plus 应用实例详解系列
30

​​​​

Vue3安装配置、开发环境搭建(组件安装卸载)（图文详细）
29

SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例）

28

查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决

27bba02a1c4617422c9fbccbf5325850d9.png

别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(1)

26fea225cb9ec14b60b2d1b797dd8278a2.png

2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特

251f53fb9c6e8b4482813326affe6a82ff.png

2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载）

246176c4061c72430eb100750af6fc4d0e.png

HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码)

2317b403c4307c4141b8544d02f95ea06c.png

​草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码

225d409c8f397a45c986ca2af7b7e725c9.png

【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码）

210a4256d5e96d4624bdca36433237080b.png

python爱心源代码集锦（18款）

204d9032c9cdf54f5f9193e45e4532898c.png

巴斯光年python turtle绘图__附源代码

19074cd3c255224c5aa21ff18fdc25053c.png​​​​​​​

Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）

18daecd7067e7c45abb875fc7a1a469f23.png​​​​​​​

​草莓熊python turtle绘图代码（玫瑰花版）附源代码

17fe88b78e78694570bf2d850ce83b1f69.png​​​​​​​

立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦

16c5feeb25880d49c085b808bf4e041c86.png​​​​​​​

皮卡丘python turtle海龟绘图（电力球版）附源代码

1538266b5036414624875447abd5311e4d.png​​​​​​​

【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向)

1403ed644f9b1d411ba41c59e0a5bdcc61.png​​​​​​​

草莓熊python turtle绘图（风车版）附源代码

1309e08f86f127431cbfdfe395aa2f8bc9.png​​​​​​​

用代码过中秋，python海龟月饼你要不要尝一口？

1240e8b4631e2b486bab2a4ebb5bc9f410.png​​​​​​​

《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念

11938bc5a8bb454a41bfe0d4185da845dc.jpeg​​​​​​​

用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心）

100f09e73712d149ff90f0048a096596c6.png​​​​​​​

Python函数方法实例详解全集(更新中...)

993d65dbd09604c4a8ed2c01df0eebc38.png​​​​​​​

matplotlib 自带绘图样式效果展示速查（28种，全）

8aa17177aec9b4e5eb19b5d9675302de8.png​​​​​​​

手机屏幕坏了____怎么把里面的资料导出（18种方法）

71750390dd9da4b39938a23ab447c6fb6.jpeg​​​​​​​

2023年3月TIOBE 指数头条：编程语言 Go 进入 TIOBE 指数前 10 名，多家权威机构____编程语言排行榜__薪酬状

6dc8796ddccbf4aec98ac5d3e09001348.jpeg​​​​​​​

Python中Print()函数的用法___实例详解(全，例多）

51ab685d264ed4ae5b510dc7fbd0d1e55.jpeg​​​​​​​

色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名)

480007dbf51944725bf9cf4cfc75c5a13.png​​​​​​​

Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细）

3c6374d75c29942f2aa577ce9c5c2e12b.png​​​​​​​

Tomcat 启动闪退问题解决集（八大类详细）

25218ac5338014f389c21bdf1bfa1c599.png​​​​​​​

Tomcat端口配置（详细）

1fffa2098008b4dc68c00a172f67c538d.png​​​​​​​

tomcat11、tomcat10 安装配置（Windows环境）（详细图文）

# vue.js # 前端 # javascript
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

cover

GitTalk | 使用面向业务的狮偶编程语言提升开发效率

avatar GitCode 开源社区
cover

GitTalk | DevUI Suits 场景解决方案

avatar GitCode 开源社区
cover

GitTalk | DevUI Admin 前端项目构建

avatar GitCode 开源社区