Element el-date-picker 日期选择器详解

简介: 本文目录1. 前言2. 基本用法3. 日期格式化4. 选择其他日期单位5. 选择多个日期6. 带快捷选项7. 禁用部分日期8. 小结

1. 前言

日期选择器用来选择一个或者多个日期,例如选择某个人的生日,再例如选择订单的创建日期,应用还是非常普遍的。

本篇就来介绍下Element提供的日期选择器的常见用法。

2. 基本用法

编写html代码如下:

  选择任意日期:
    <el-date-picker v-model="value" type="date" placeholder="选择日期" @change="dateChange"> 
    </el-date-picker>

如上代码会显示一个日期选择器,且选中日期的值绑定了value变量,且当选中日期发生变化时,会触发dateChange方法。

对应效果如下:

image.png

3. 日期格式化

有时候我们需要,按照我们设定的格式,来处理绑定的日期值,可以通过value-format属性来指定格式,常用的格式化字符串包括:


yyyy 年

MM 月

WW 周

dd 日

HH 时 (24小时制)

hh 时 (12小时制)

mm 分钟

ss 秒

所以,如果按照MySQL数据库对日期字符串格式化要求,我们编写代码如下:


日期格式化:{{value}}

   <el-date-picker v-model="value" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss">

   </el-date-picker>


选中某个日期后,对应效果如下,可见value已经被格式化:



4. 选择其他日期单位

除了选中某一天,有时候我们还会面临,选择某一周、某个月份、某个年份的需求,此时可以通过type属性来设置。


例如:


选择其他日期单位

   <el-date-picker v-model="valueWeek" type="week" format="yyyy 第WW周" placeholder="选择周">

   </el-date-picker>

   <el-date-picker v-model="valueMonth" type="month" placeholder="选择月">

   </el-date-picker>

   <el-date-picker v-model="valueYear" type="year" placeholder="选择年">

   </el-date-picker>


效果:



5. 选择多个日期

el-date-picker还支持选中多个日期,通过将type属性值设置为dates即可。


选择多个日期

   <el-date-picker type="dates" v-model="valueDates" placeholder="选择一个或多个日期">

   </el-date-picker>


效果:



6. 带快捷选项

有时候,我们希望可以直接选择昨天、上周、上月,这些经常使用的日期不需要我们去查找,就能快速选中,此时可以借助picker-options属性来实现。


代码:


带快捷选项

   <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsFast" placeholder="选择日期">

   </el-date-picker>


  optionsFast: {

       shortcuts: [{

         text: '今天',

         onClick(picker) {

           picker.$emit('pick', new Date());

         }

       }, {

         text: '昨天',

         onClick(picker) {

           const date = new Date();

           date.setTime(date.getTime() - 3600 * 1000 * 24);

           picker.$emit('pick', date);

         }

       }, {

         text: '一周前',

         onClick(picker) {

           const date = new Date();

           date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);

           picker.$emit('pick', date);

         }

       }]

     },


通过上述代码,点击text对应按钮,即可将我们代码编写的值选中,效果如下:



7. 禁用部分日期

通过picker-options还可以禁用部分日期,代码:


 禁用部分日期

   <el-date-picker v-model="value" align="right" type="date" :picker-options="optionsDisable" placeholder="选择日期">

   </el-date-picker>


   optionsDisable: {

       disabledDate(time) {

         return time.getTime() > Date.now();

       },

     }


效果如下:



8. 小结

el-date-picker日期选择器提供的功能很全面,实现起来也挺简单,还是比较好用的。

相关文章
|
JavaScript
vue element plus DatePicker 日期选择器
vue element plus DatePicker 日期选择器
680 0
|
JavaScript API 定位技术
vue中如何获取到当前位置的天气
vue中如何获取到当前位置的天气
1341 0
element-使用el-date-picker 选择日期后返回周几(整理)
element-使用el-date-picker 选择日期后返回周几(整理)
|
编解码 前端开发
Element el-row el-col 布局组件详解
本文目录 1. 背景 2. 分栏布局 3. 分栏间隔 4. 分栏偏移 4. 对齐方式 5. 响应式布局 6. 小结
6856 0
Element el-row el-col 布局组件详解
Vue3日期选择器(DatePicker)
该组件基于 **@vuepic/vue-datepicker@9.0.1** 进行二次封装,简化了日常使用。除范围和年选择器外,其他日期选择均返回格式化的字符串。提供了多种自定义设置,如日期选择器宽度、模式、格式等,并支持时间选择和“今天”按钮展示。详细配置及更多功能请参考[官方文档](https://vue3datepicker.com/installation/)。组件已集成所有原生属性,并支持主题颜色自定义。 示例代码展示了如何创建和使用日期选择器组件,包括基本使用、禁用日期、日期时间选择器、范围选择器等多种场景。更多功能和样式可通过官方文档了解。
2126 2
Vue3日期选择器(DatePicker)
|
11月前
|
前端开发 JavaScript 开发者
利用 el-select 和 el-tree 实现树形结构多选框联动功能
本文详细介绍了如何使用ElementUI中的el-select下拉选择器和el-tree树形控件来实现多功能联动选择器,包括多选、删除、搜索、清空选项等功能。通过树形控件展示复杂的层级结构,用户可以通过下拉选择树形节点,实时搜索节点,且支持批量选择和删除功能。文中提供了完整的HTML、JavaScript和CSS代码实现,帮助开发者快速集成此功能。
3827 0
利用 el-select 和 el-tree 实现树形结构多选框联动功能
el-date-picker组件的picker-options常规属性设置
el-date-picker组件的picker-options常规属性设置
Element el-time-picker el-time-select 时间选择器详解
本文目录 1. 概述 2. 选择任意时间 3. 默认时间设置 4. 时间格式设置 5. 指定可选时间段 6. 选择时间点 7. 时间选择变化事件
5113 0
在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件
本文介绍了如何在Vue3项目中使用`vue3-seamless-scroll`插件实现无缝滚动效果,并提供了详细的示例代码和运行效果。
5121 0

热门文章

最新文章