element ui的日期选择器动态设定年份,并默认显示在该年份范围的日期时间

news2024/11/24 3:32:56

选中某个年份,让日期选择器只能选择该年份内的时间,并且默认显示该年份的时间(由于日期选择器默认显示为当前时间,所以需要跳转到选择的年份)

例:年份选择了2022年,那么日期选择也相应显示到2022年,对月日没有要求,月日默认显示为当前日期的月日,只是年份变动。

 HTML部分
//年份选择
<el-date-picker :clearable="false" v-model="searchForm.year" type="year" format="yyyy" @change="handleChange" value-format="yyyy" placeholder="选择年">
</el-date-picker>

//日期范围选择
<el-date-picker v-model="longTime" type="daterange" range-separator="至" start-placeholder="开始日期" :picker-options="pickerOptions" :default-value="dateDefaultShow" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
</el-date-picker>
JS部分
data() {
    let disabledDate = (time) => {
      const year = this.searchForm.year // 获取当前年份
      const oneYear = Number(year) + 1 // 获取下一年
      const lastYear = Number(year) - 1 // 获取上一年
      const timeYear = new Date(oneYear + '/1/1').getTime() // 将明年的日期转换成时间戳
      const timeYearlast = new Date(lastYear + '/12/31').getTime() // 将去年的日期转换成时间戳
      return time.getTime() >= timeYear || time.getTime() <= timeYearlast
    };
    return {
      searchForm: {
        year: "",
        startDate: "",
        endDate: "", 
        currentPage: 1,
        pageSize: 20,
      },
      longTime: [],
      pickerOptions: {
        disabledDate,
      },
      dateDefaultShow: '',//日期选择器的日期默到选择的年份
    };
  },
methods:{
    handleChange() {
      this.longTime = []
      const mon = new Date().getMonth() + 1 // 获取当前月份份
      const day = new Date().getDate() // 获取当前日期
      this.dateDefaultShow = this.searchForm.year + '-' + mon + '-' + day //日期选择器定位当一年前的今日
    },
}

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

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

相关文章

160. 相交链表-哈希表法O(n)时间复杂度

160. 相交链表-o&#xff08;n&#xff09;时间复杂度 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个…

CPU vs GPU:谁更适合进行图像处理?

CPU 和 GPU 到底谁更适合进行图像处理呢&#xff1f;相信很多人在日常生活中都会接触到图像处理&#xff0c;比如修图、视频编辑等。那么&#xff0c;让我们一起来看看&#xff0c;在这方面&#xff0c;CPU 和 GPU 到底有什么不同&#xff0c;哪个更胜一筹呢&#xff1f; 一、C…

揭密,这个微信群机器人的所有秘密在这里

技术长久不用就废了&#xff0c;我想把软件开发技术重新捡拾起来。 咱们“一起学英语”群已有三年时光&#xff0c;群里很多朋友互帮互助走到了今天。可是&#xff0c;即使再好玩的英语话题&#xff0c;也有谈腻的时候。 群里是不是应该引入一点好玩的东西&#xff1f; 人工智能…

【DP】背包问题全解

一.简介 DP&#xff08;动态规划&#xff09;背包问题是一个经典的组合优化问题&#xff0c;通常用来解决资源分配的问题&#xff0c;如货物装载、投资组合优化等。问题的核心思想是在有限的资源约束下&#xff0c;选择一组物品以最大化某种价值指标&#xff0c;通常是总价值或…

Ulimit -系统资源配额配置说明

Linux 对于每个用户&#xff0c;系统限制其最大进程数&#xff0c;为提高性能&#xff0c;可以根据设备资源情况&#xff0c; 设置个Linux用户的最大进程数&#xff0c;一些需要设置为无限制&#xff1b; ulimit 参数说明 选项 含义 例子 -H 设置硬资源限制&#xff0c;一旦…

【C++初阶(六)】类和对象(中)与日期类的实现

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…

【C++】——运算符重载

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

第二证券:今日投资前瞻:可控核聚变进展加速 光模块产业趋势加强

昨日&#xff0c;两市股指全线高开&#xff0c;盘中窄幅轰动&#xff0c;尾盘三大股指全线翻红。到收盘&#xff0c;沪指涨0.25%报3046.53点&#xff0c;深成指涨0.1%报9988.83点&#xff0c;创业板指涨0.2%报2009.21点&#xff0c;北证50指数涨近1%。两市估计成交8686亿元&…

个体诊所电子处方系统设计,诊所电子处方模板,药店电子处方系统,佳易王电子处方管理系统V16.0下载

个体诊所电子处方系统设计&#xff0c;诊所电子处方模板&#xff0c;药店电子处方系统&#xff0c;佳易王电子处方管理系统V16.0下载 软件支持配方模板&#xff0c;病人病历记录查询等&#xff0c;软件打印处方单所用的纸张为 A5纸。软件可以下载试用&#xff0c;点击最下方官网…

高效攻略各类BOSS,成为真正的剑侠!

逆水寒作为一款备受瞩目的国产武侠游戏&#xff0c;其精美的画面和真实的剑术体验吸引了众多玩家。在这篇实用干货分享中&#xff0c;我们将详细介绍一些攻略各类BOSS的技巧和策略&#xff0c;帮助你在游戏中轻松击败强大的对手&#xff0c;成为真正的剑侠大师。 首先&#xff…

谁在推动国际现货白银价格?

在过去的几十个年头里&#xff0c;国际现货白银价格经历了显著的波动&#xff0c;银价从1970年的每盎司1美元&#xff0c;到1980年的每盎司50美元&#xff0c;再到2010年的每盎司30美元&#xff0c;惊人的涨跌幅度令不少人留下了深刻的印象&#xff0c;本文将为大家剖析这些波动…

猪酒店房价采集

<?php // 设置代理 $proxy_host jshk.com.cn;// 创建一个cURL资源 $ch curl_init();// 设置代理 curl_setopt($ch, CURLOPT_PROXY, $proxy_host.:.$proxy_port);// 连接URL curl_setopt($ch, CURLOPT_URL, "http://www.zujia.com/");// 发送请求并获取HTML文档…

基于安卓android微信小程序的快递取件及上门服务系统

项目介绍 本文从管理员、用户的功能要求出发&#xff0c;快递取件及上门服务中的功能模块主要是实现管理员服务端&#xff1b;首页、个人中心、用户管理、快递下单管理、预约管理、管理员管理、系统管理、订单管理&#xff0c;用户客户端&#xff1b;首页、快递下单、预约管理…

​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型

内容来源&#xff1a;xiaohuggg Distil-Whisper&#xff1a;比Whisper快6倍&#xff0c;体积小50%的语音识别模型 ​该模型是由Hugging Face团队开发&#xff0c;它在Whisper核心功能的基础上进行了优化和简化&#xff0c;体积缩小了50%。速度提高了6倍。并且在分布外评估集上…

【软考】_高级_信息系统项目管理师_考前冲刺1

目录 一、某项目预计最快12天完成&#xff0c;最慢36天完成&#xff0c;21天完成的可能性最大。公司下达的计划是18天完成&#xff0c;要使计划完成的概率达到50%&#xff0c;在计划中需要增加&#xff08; &#xff09;天应急时间。 二、&#xff08; &#xff09;是指一个操…

二、网站高性能架构设计——web前端与池化

从公众号转载&#xff0c;关注微信公众号掌握更多技术动态 --------------------------------------------------------------- 一、高性能浏览器访问 1.减少HTTP请求 HTTP协议是无状态的应用层协议&#xff0c;也就是说每次HTTP请求都需要建立通信链路、进行数据传输&#xf…

锂价疲软,市场需求持续低迷,赣锋锂业在短期内将继续面临痛苦

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 公司介绍 在赣锋锂业(01772)(002460)网站上&#xff0c;赣锋锂业称自己是一家拥有“中国第一”和“世界最大锂金属生产商”的“锂化合物产能”公司。 根据其2022财年年度报告&#xff0c;该公司最近一个财年的收入有84%和1…

基于LDPC编译码和FP-MAP球形检测算法的协作MIMO系统误码率matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 LDPC码 4.1 Fincke-Pohst-MAP球形检测算法 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2017b 3.部分核心程序 .........................................…

SpringBoot文件在线预览实现

kkFileView - 在线文件预览&#xff0c;一款成熟且开源的文件文档在线预览项目解决方案。 详细wiki文档&#xff1a;https://gitee.com/kekingcn/file-online-preview/wikis/pages 中文文档&#xff1a;https://gitee.com/kekingcn/file-online-preview/blob/master/README.md…

关于start-burp抓包夜神-系统证书导入

1、开启开发中模式 2、开启USB调试 3、开启端口监听并下载start-burp证书 4、证书在线格式转换 根据该网站【在线DER格式转pem CER格式转pem CRT格式转PEM证书格式--查错网】也可以搜索其它在线转换网站进行操作 新建一个文本文件重名为【9a5ba575.0】&#xff0c;将转换的内…