【ElementUI】详细分析DatePicker 日期选择器

目录

  • 前言
  • 1. 通用Demo
  • 2. 快捷键
  • 3. 参数

前言

对于全栈玩家,各个组件都需相应了解才可做好前后端的CRUD

以下为实战结合Element官网的心得体会

如图所示:

在这里插入图片描述

1. 通用Demo

如果只想要一个选择日期,而不是范围,Demo如下:

<template><div class="block"><span class="demonstration">默认</span><el-date-pickerv-model="value1"type="date"placeholder="选择日期"></el-date-picker></div><div class="block"><span class="demonstration">带快捷选项</span><el-date-pickerv-model="value2"align="right"type="date"placeholder="选择日期":picker-options="pickerOptions"></el-date-picker></div>
</template>

截图如下:

在这里插入图片描述

如果需要时间选择,总体Demo如下:

<template><!-- 包含快捷选项的日期选择器 --><div class="block"><!-- 演示快捷选项 --><span class="demonstration">带快捷选项</span><!-- 日期选择器组件 --><el-date-pickerv-model="value2"type="datetimerange"align="right"unlink-panelsrange-separator=""start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {// 日期选择器的选项pickerOptions: {// 快捷选项shortcuts: [// 最近一周{text: '最近一周',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);picker.$emit('pick', [start, end]);}},// 最近一个月{text: '最近一个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);picker.$emit('pick', [start, end]);}},// 最近三个月{text: '最近三个月',onClick(picker) {const end = new Date();const start = new Date();start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);picker.$emit('pick', [start, end]);}}]},// 绑定的值1value1: '',// 绑定的值2value2: ''};}};
</script>

具体的参数解释如下:

  • unlink-panels解除左右面板的联动(各自独立切换当前月份),选择日期范围时,默认情况下左右面板会联动
  • type为daterange,则显示到日,若为datetimerange则显示到秒

如果是按照默认月份,具体如下:

<template><div class="block"><span class="demonstration">带快捷选项</span><el-date-pickerv-model="value2"type="monthrange"align="right"unlink-panelsrange-separator=""start-placeholder="开始月份"end-placeholder="结束月份":picker-options="pickerOptions"></el-date-picker></div>
</template><script>export default {data() {return {pickerOptions: {shortcuts: [{text: '本月',onClick(picker) {picker.$emit('pick', [new Date(), new Date()]);}}, {text: '今年至今',onClick(picker) {const end = new Date();const start = new Date(new Date().getFullYear(), 0);picker.$emit('pick', [start, end]);}}, {text: '最近六个月',onClick(picker) {const end = new Date();const start = new Date();start.setMonth(start.getMonth() - 6);picker.$emit('pick', [start, end]);}}]},value1: '',value2: ''};}};
</script>

截图如下:

在这里插入图片描述

2. 快捷键

对于快捷键选项除了实现上述方案还可如下:

// 时间选择
pickerOptions: {shortcuts: [{text: '上周',onClick(picker) {const end = new Date();const start = new Date();// 设置起始日期为本周的第一天start.setDate(end.getDate() - end.getDay() - 6);// 设置结束日期为本周的最后一天end.setDate(end.getDate() - end.getDay() );picker.$emit('pick', [start, end]);}}, {text: '这周',onClick(picker) {const end = new Date();const start = new Date();// 设置起始日期为本周的第一天start.setDate(end.getDate() - end.getDay() + 1);// 设置结束日期为本周的最后一天end.setDate(end.getDate() - end.getDay() + 7);picker.$emit('pick', [start, end]);}}, {text: '下周',onClick(picker) {const end = new Date();const start = new Date();// 设置起始日期为下周的第一天start.setDate(end.getDate() - end.getDay() + 8);// 设置结束日期为下周的最后一天end.setDate(end.getDate() - end.getDay() + 14);picker.$emit('pick', [start, end]);}}]
},

截图如下:

在这里插入图片描述

pickerOptions: {disabledDate(time) {return time.getTime() > Date.now();},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);}}]
},

截图如下:

在这里插入图片描述

3. 参数

更多的参数解释如下:

格式含义备注例子
yyyy 年2017
M不补01
MM01
W仅周选择器的 format 可用;不补01
WW仅周选择器的 format 可用01
d不补02
dd02
H小时24小时制;不补03
HH小时24小时制03
h小时12小时制,须和 A 或 a 使用;不补03
hh小时12小时制,须和 A 或 a 使用03
m分钟不补04
mm分钟04
s不补05
ss05
AAM/PM仅 format 可用,大写AM
aam/pm仅 format 可用,小写am
timestampJS时间戳仅 value-format 可用;组件绑定值为number类型1483326245000
[MM]不需要格式化字符使用方括号标识不需要格式化的字符 (如 [A] [MM])MM

对于日期选择的更多参数说明:

参数说明类型可选值默认值
value / v-model绑定值date(DatePicker) / array(DateRangePicker)
readonly完全只读booleanfalse
disabled禁用booleanfalse
editable文本框可输入booleantrue
clearable是否显示清除按钮booleantrue
size输入框尺寸stringlarge, small, mini
placeholder非范围选择时的占位内容string
start-placeholder范围选择时开始日期的占位内容string
end-placeholder范围选择时结束日期的占位内容string
type显示类型stringyear/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrangedate
format显示在输入框中的格式string见日期格式yyyy-MM-dd
align对齐方式stringleft, center, rightleft
popper-classDatePicker 下拉框的类名string
picker-options当前时间日期选择器特有的选项参考下表object{}
range-separator选择范围时的分隔符string‘-’
default-value可选,选择器打开时默认显示的时间Date可被new Date()解析
default-time范围选择时选中日期所使用的当日内具体时刻string[]数组,长度为 2,每项值为字符串,形如12:00:00,第一项指定开始日期的时刻,第二项指定结束日期的时刻,不指定会使用时刻 00:00:00
value-format可选,绑定值的格式。不指定则绑定值为 Date 对象 string 见日期格式 —
unlink-panels在范围选择器里取消两个日期面板之间的联动 boolean — false
prefix-icon自定义头部图标的类名stringel-icon-date
clear-icon自定义清空图标的类名stringel-icon-circle-close
validate-event输入时是否触发表单的校验booleantrue
append-to-bodyDetePicker 自身是否插入至 body 元素上。booleantrue

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/786032.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker搭建LNMP环境实战(09):安装mariadb

1、编写mariadb部署配置文件 在文件夹&#xff1a;/mnt/hgfs/dockers/test_site/compose下创建文件&#xff1a;test_site_mariadb.yml&#xff0c;内容如下&#xff1a; version: "3.5" services:test_site_mariadb:container_name: test_site_mariadbimage: mari…

逐步学习Go-Select多路复用

概述 这里又有多路复用&#xff0c;但是Go中的这个多路复用不同于网络中的多路复用。在Go里&#xff0c;select用于同时等待多个通信操作&#xff08;即多个channel的发送或接收操作&#xff09;。Go中的channel可以参考我的文章&#xff1a;逐步学习Go-并发通道chan(channel)…

JS基本类型作用域作用域链

#### 作用域链 作用域链的用途&#xff0c;是保证对执行环境有权访问的所有变量和函数的有序访问。看一个例子 js var a 1 function fn () {var b a 1console.log(b) } fn() ### 从代码执行来看 首先在创建fn函数时&#xff0c;会创建一个预先包含全局变量对象的作用域链&am…

Gparted工具 初始化磁盘

Gparted工具 初始化磁盘 1、安装 没有此工具请先安装&#xff1a; yum install epel-release yum install gparted yum install yum-utils git gnome-common gcc-c yum-builddep gparted 2、打开Gparted工具&#xff0c;初始化磁盘 使用具有root权限的普通用户打开gparted&…

HWOD:整型数组排序

一、知识点 while(1){}表示永久循环 使用break结束循环 二、题目 1、描述 输入整型数组和排序标识&#xff0c;对其元素按照升序或降序进行排序 2、数据范围 1<n<1000 0<val<100000 3、输入 第一行输入数组元素个数 第二行输入待排序的数组&#x…

电商技术揭秘二:电商平台推荐系统的实现与优化

文章目录 一、推荐系统的重要性1.1 提升用户体验1.1.1 个性化推荐增强用户满意度1.1.2 减少用户选择困难 1.2 增加销售额1.2.1 促进交叉销售和捆绑销售1.2.2 提高用户购买转化率 1.3 数据分析与用户行为理解1.3.1 挖掘用户偏好和购买习惯1.3.2 为产品开发和库存管理提供数据支持…

npm ERR! code CERT_HAS_EXPIRED 淘宝镜像失效

近期vue安装失败&#xff0c;具体如下&#xff1a; 1.先npm cache clean --force 再下载 插件后缀加上 --legacy-peer-deps 2.certificate has expired npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.npm.taobao.o…

rollup 插件的使用及常用插件介绍

rollup 插件的使用及常用插件介绍 如果我们需要打包更为复杂的代码&#xff0c;就需要配置一些插件来实现。比如导入使用 NPM 安装的模块、使用 Babel 编译代码、处理 JSON 文件等等。 插件使用 rollup 是用于打包 JavaScript 的工具&#xff0c;如果我们想处理其他文件&…

Windows安装禅道系统结合Cpolar实现公网访问内网BUG管理服务

文章目录 前言1. 本地安装配置BUG管理系统2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射本地服务3. 测试公网远程访问4. 配置固定二级子域名4.1 保留一个二级子域名5.1 配置二级子域名6. 使用固定二级子域名远程 前言 BUG管理软件,作为软件测试工程师的必备工具之一。在…

943: 顺序表插入操作的实现

学习版 【C语言】 需要扩充数组 【C】 #include <iostream> #include <vector> #include <algorithm> using namespace std; class MyLinkedList { public:struct LinkedNode{int val;LinkedNode* next;LinkedNode(int x) :val(x), next(NULL) {}};MyLin…

TypeScript语法快速上手

TypeScript语法 对比ts编译器类型注解新增类型数组自定义类型注解函数类型对象类型元组类型类型推断枚举类型 对比 最大区别&#xff1a;ts能在编译时就能发现类型错误的问题&#xff0c;而js只有在系统运行时再通过异常中断来发现 ts的底层仍是js&#xff0c;但ts能够有效减少…

代码随想录算法训练营第二十七天|131.分割回文串、93.复原IP地址

文档链接&#xff1a;https://programmercarl.com/ LeetCode131.分割回文串 题目链接&#xff1a;https://leetcode.cn/problems/palindrome-partitioning/ 思路&#xff1a;把回溯的树画出来就好很多。startIndex用来控制切割的位置 例如对于字符串abcdef&#xff1a; 组…

深度学习入门:从理论到实践的全面指南

深度学习入门&#xff1a;从理论到实践的全面指南 引言第一部分&#xff1a;深度学习基础第二部分&#xff1a;数学基础第三部分&#xff1a;编程和工具第四部分&#xff1a;构建你的第一个模型第五部分&#xff1a;深入学习结语 引言 大家好&#xff0c;这里是程序猿代码之路。…

阿里巴巴实习面经

本人bg&#xff1a;浙江大学&#xff0c;计算机研二&#xff0c;本科也是浙大计算机专业的。 在阿里巴巴达摩院实习&#xff0c;算法岗&#xff0c;我是去年拿到的阿里巴巴达摩院的实习offer&#xff0c;这个过程还是比较惊心动魄&#xff0c;所以我称之为惊心动魄版本&#xf…

golang语言系列:Authentication、OAuth、JWT 认证策略

云原生学习路线导航页&#xff08;持续更新中&#xff09; 本文是 golang语言系列 文章&#xff0c;主要对编程通用技能 Authentication、OAuth、JWT 认证策略 进行学习 1.Basic Authentication认证 每个请求都需要将 用户名密码 进行base64编码后&#xff0c;放在请求头的Aut…

微信小程序中实现埋点的方法

在小程序开发过程中,埋点是实现数据采集和用户行为分析的重要手段。通过埋点,我们可以获取用户在使用小程序时的各种操作信息,从而更好地了解用户行为特征,优化产品体验。下面将介绍如何在小程序中实现埋点,并通过代码示例进行说明。 一、埋点实现思路 小程序的埋点实现主要依…

html基础:颜色的 5 种表示方法(最全!)

你好&#xff0c;我是云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛&#xff0c;大专生&#xff0c;2年时间从1800到月入过万&#xff0c;工作5年买房。 分享成长心得。 HTML 颜色在网页设计中扮演着重要角色&#xff0c;给网页增加颜色可以增强用户体验&#xff0c;…

AI行业买英伟达GPU,花的钱比赚的多17倍

ChatGPT狂飙160天&#xff0c;世界已经不是之前的样子。 新建了人工智能中文站https://ai.weoknow.com 每天给大家更新可用的国内可用chatGPT资源 发布在https://it.weoknow.com 更多资源欢迎关注 有人却表示「很合理」。 搞 AI 大模型&#xff0c;实在太烧钱了。 我们知道&…

全量知识系统 详细设计 之preserving (百度搜索QA)

今天在查资料时&#xff0c;百度跳出这个对话框&#xff0c;试了一下&#xff0c;感觉使用起来更方便&#xff0c;更重要的是&#xff0c;一次能将整份文档上传。所以就preserving的设计&#xff0c;又问了一遍。原文链接&#xff1a; https://blog.csdn.net/ChuanfangChen/ar…

大数据基础设施搭建 - Spark

文章目录 一、解压压缩包二、修改配置文件conf/spark-env.sh三、测试提交Spark任务四、Spark on Hive配置4.1 创建hive-site.xml&#xff08;spark/conf目录&#xff09;4.2 查看hive的hive-site.xml配置与3.1配置的是否一致4.3 测试SparkSQL4.3.1 启动SparkSQL客户端4.3.2 启动…