element日期选择器 年月日选择
2024-04-26 21:14:52
element日期选择器 年月日选择
1，效果图
2，月和日官网上都有现成的，直接拿来用，年手动写的
<div class="tableoptbox"><div class="tableoptboxleft"><a-radio-group v-model="type" :default-value="0" @change="onchangeradio"><a-radio :value="0">日数据</a-radio><a-radio :value="1">月数据</a-radio><a-radio :value="2">年数据</a-radio></a-radio-group></div><div class="tableoptboxright"><!-- 年 --><el-date-pickerv-show="type == 2"v-model="startYear"type="year"placeholder="开始年"size="mini"class="year-picker"@change="changeStartYear"format="yyyy 年"value-format="yyyy"prefix-icon=""></el-date-picker><span class="range-word" v-show="type == 2"> ~ </span><el-date-pickerv-show="type == 2"v-model="endYear"type="year"placeholder="结束年"size="mini"class="year-picker"@change="changeEndYear"format="yyyy 年"value-format="yyyy"></el-date-picker><!-- 月 --><el-date-pickerv-show="type == 1"v-model="dataTime"@change="timeOptions"format="yyyy - MM "type="monthrange"start-placeholder="开始月份"end-placeholder="结束月份"></el-date-picker><!-- 日 --><el-date-pickerv-show="type == 0"v-model="createTime"type="daterange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="riOptions"></el-date-picker></div></div>
3， 传参的时候判断用到parseTime，必须要引入，否则全部失效，文件会放在最下边
import { parseTime } from '@/utils/date'
export default {data(){return{startYear: '', //开始年endYear: '', //结束年createTime: '', //日dataTime: '',//月type: 0 // type 0日 1 月 2 年}}
}
4，选择年月日的回调
methods：{// 选择年月日onchangeradio(data) {this.type = data.target.value}//选择年月日的回调// 开始年changeStartYear(valStart) {this.startYear = valStart// 开始年份大于结束年份，调换 需要的打开 // if (Number(this.startYear) > Number(this.endYear)) {// this.startYear = this.endYear// this.endYear = valStart// }},//结束年changeEndYear(valEnd) {this.endYear = valEnd// if (Number(this.startYear) > Number(this.endYear)) {// this.endYear = this.startYear// this.startYear = valEnd// }},// 月timeOptions(value) {// 获取时间选择器的开始月let startDay = parseTime(value.toString().split(',')[0], '{y}-{m}') // 获取时间选择器的结束月let endDay = parseTime(value.toString().split(',')[1], '{y}-{m}') this.dataTime[0] = startDaythis.dataTime[1] = endDay},// 日riOptions(value) {// 获取时间选择器的开始日let startTime = parseTime(value.toString().split(',')[0], '{y}-{m}-{d} {h}:{i}:{s}')// 获取时间选择器的开始日let upTime = parseTime(value.toString().split(',')[1], '{y}-{m}-{d} {h}:{i}:{s}')this.createTime[0] = startTimethis.createTime[1] = upTime},
}
5，传参的时候 判断一下 如果选择了就传 没选择就不传
// 0 日 1月 2年if (this.type == 0) {data.startTime = this.createTime[0] ? parseTime(this.createTime[0], '{y}-{m}-{d} 00:00:00') : nulldata.upTime = this.createTime[1] ? parseTime(this.createTime[1], '{y}-{m}-{d} 23:59:59') : null} else if (this.type == 1) {data.startTime = this.dataTime[0] ? parseTime(this.dataTime[0], '{y}-{m}') : nulldata.upTime = this.dataTime[1] ? parseTime(this.dataTime[1], '{y}-{m}') : null} else if (this.type == 2) {data.startTime = this.startYear ? this.startYear : nulldata.upTime = this.endYear ? this.endYear : null}
6，参数位置 同上 ↑↑↑
7，年月日传参图
8，utils/date.js
export function parseTime(time, cFormat) {if (arguments.length === 0) {return null}const format = cFormat || '{y}-{m}-{d} {h}:{i}:{s}'let dateif (typeof time === 'object') {date = time} else {if (typeof time === 'string' && /^[0-9]+$/.test(time)) {time = parseInt(time)}if (typeof time === 'number' && time.toString().length === 10) {time = time * 1000}date = new Date(time)}const formatObj = {y: date.getFullYear(),m: date.getMonth() + 1,d: date.getDate(),h: date.getHours(),i: date.getMinutes(),s: date.getSeconds(),a: date.getDay()}const time_str = format.replace(/{([ymdhisa])+}/g, (result, key) => {const value = formatObj[key]// Note: getDay() returns 0 on Sundayif (key === 'a') {return ['日', '一', '二', '三', '四', '五', '六'][value]}return value.toString().padStart(2, '0')})return time_str
}
element日期选择器 年月日选择相关推荐
- element 日期选择器 只能选择今天之前或选择今天之后的日期
<template><div class="app-container"><el-date-pickerv-model="birthday& ...
- vue使用element日期选择器，选择日期少一天的问题
添加属性value-format="yyyy-MM-dd"即可
- Element日期选择器带快捷选项切换日期
Element 日期选择器改造,需求是打开选择器里面可以按日期选,按月份选,按年份选,如下图 我们要怎么去实现这个需求尼?那我们就简单粗暴一点上代码 html代码 <el-date-picker ...
- element 日期选择器el-date-picker 月份/日期范围控制
element 日期选择器el-date-picker 月份范围控制 <template> <el-date-pickertype="month"v-model= ...
- vue+elementUI日期选择器实现选择日期，自动对应周几，并且是包含所选择日期的一周的日期
vue+elementUI日期选择器实现选择日期,自动对应周几 之前在公司的项目里面遇到这个问题,如今想起来在这里总结一下,如果有更好的方法,请各位大神多多指教. 在template里面给选择日期的e ...
- antd 日期时间选择_antd日期选择器禁止选择当天之前的时间操作
使用disabledDate属性(不可选择的日期) 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current &&am ...
- element 日期选择器
element DatePicker 日期选择器 限制在三个月外加快捷选择日期 在项目中想使用日期选择器,并且把时间限制在三个月以内,在官网中查看到 disabledDate 和 onPick 两个方 ...
- Element日期选择器带快捷选项切换日期类型
需求: 如图,日期选择器弹出框快捷选项切换日期类型,高亮显示. 思路: 两种类型的日期弹窗点击快捷选项切换显示,通过ref控制弹出关闭handleClose()和聚焦显示focus(). 实现代码: ...
- Ant Design RangePicker 日期选择器不可选择今日或以后的日期, 最多可以选择31天.
首先先看看效果: 效果图: 默认是一直不可选择今日和以后的日期 当选择了一个日期后, 将它的可选择区间限制在 31 天内, 并且下次选择时解除限制 下面是代码示例, 里面的 props, state, ...
最新文章
- 【Android 插件化】VirtualApp 接入 ( 安装 APK 插件应用 | 启动插件 APK 应用 | MainActivity 安装启动插件完整代码 )
- TS和JS相对比的优势
- 星尘小组第八周翻译-数据页和数据行
- SAP Spartacus里的HTTPErrorInterceptor的设计原理
- 国际经管学院举办计量经济学术前沿研讨会
- mysql 空位补0_MySQL-13（表的创建、数值类型整型、float/decimal、ZEROFILL、BIT(M)）
- sours insight 使用技巧
- 关于微信中的localStorage及使用cookie的解决方案
- centos7以上系统服务管理命令-systemctl
- 【python基础】--常用数据结构
- 8. PHP7 安装
- 怎么查看个人CSDN账号积分-最靠谱！
- Wowza服务器系列（4）：使用rtmp协议向wowza推流的wowoza配置方法
- Java使用map接收时间格式是Wed Sep 14 00:00:00 CST 2022这种解决办法
- 流场（向量场）临界点的检测与分类
- 全球及中国荧光标签色带行业研究及十四五规划分析报告
- MBA中国网关注：打造最佳团队的5大秘诀
- 云南大学研究生院c语言真题,云南大学地图学与地理信息系统研究生考试科目和考研参考书目...
- NICO EXCHANGE NICO 交易所系統維護公告
- 扫描线面积并、面积交模板