首页 > 其他分享 >element-ui 时间选择器

element-ui 时间选择器

时间:2024-04-18 17:23:15浏览次数:24  
标签:00 const param element let new Date ui 选择器

需求: 时分秒的选择,限制选择:自当前时间6个月的内的时间
<el-date-picker
                v-model="duration"
                type="datetimerange"
                range-separator="~"
                :start-placeholder="this.$t('templateManager.startDate')"
                :end-placeholder="this.$t('templateManager.endDate')"
                value-format="yyyy-MM-dd HH:mm:ss"
                format="yyyy-MM-dd HH:mm:ss"
                size="mini"
                style="width:90%"
                :clearable="false"
                :picker-options="pickerOptions"
              />



      pickerOptions: {
        disabledDate(time) {
          let currentDate = new Date();
          let year = currentDate.getFullYear();
          let month = currentDate.getMonth();
          let date = currentDate.getDate();
          // 强制将当前时间的:时、分、秒设置时间为 23:59:59。 不然选择 时分秒的时候,如果超过当前的时分秒,确认按钮会禁用,无法选择
          let newDate = new Date(year, month, date, 23, 59, 59);
          let currentTimeStr = newDate.getTime();
          const sixMonthsAgo = new Date();
          //设置6个月的时间范围
          sixMonthsAgo.setMonth(sixMonthsAgo.getMonth() - 6);
          //time>currentTimeStr:把当前之后的全部禁用
          //time<sixMonthsAgo.getTime()禁用6个月前的
          return time.getTime() > currentTimeStr || time < sixMonthsAgo.getTime();
        },
      },

/**
 * @method 计算两个日期时间范围是否在N个月以内 eg:['2024-04-01 00:00:00', '2024-05-31 00:00:00']是否在6个月内
 * @param  {String} startDate 开始时间
 * @param  {String} endDate 结束时间
 * @param  {Number} value  指定的相差月份
 * @return {Boolean} true 是, false 否
 */
export function isWithinSpecifiedMonths(startDate, endDate, value) {
  let start = new Date(startDate);
  let end = new Date(endDate);
  //  确认开始时间早于结束时间
  if (start > end) {
    [start, end] = [end, start];
  }
  // 计算月份差异
  const monthsDiff = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());
  // 检查月份差异是否小于或等于 差异月份
  return  monthsDiff <= value
}
/**
 * @method 计算两个日期时间范围是否在N小时内以内
 * @param  {String} startTimeStr 开始时间
 * @param  {String} endTimeStr 结束时间
 * @param  {Number} value 指定的相差月份
 * @return {Boolean}  true 是, false 否
 */
export  function isWithinSpecifiedHours(startTimeStr, endTimeStr,value) {
  const startTime = new Date(startTimeStr);
  const endTime = new Date(endTimeStr);
  const timeDiff = endTime - startTime;
  const timeDiffHours = timeDiff / (1000 * 60 * 60);
  return timeDiffHours <= value
}

标签:00,const,param,element,let,new,Date,ui,选择器
From: https://www.cnblogs.com/0520euv/p/18143985

相关文章

  • 【GUI软件】小红书按关键词采集笔记详情,支持多个关键词,含笔记正文、转评赞藏等,爬了102
    一、背景介绍1.1爬取目标熟悉我的小伙伴都了解,我之前开发过2款软件:【GUI软件】小红书搜索结果批量采集,支持多个关键词同时抓取!【GUI软件】小红书详情数据批量采集,含笔记内容、转评赞藏等,支持多笔记同时采集!现在介绍的这个软件,相当于以上2个软件的结合版,即根据关键词爬取......
  • UI——数据表和UI绑定
    目的创建数据表创建UI控件玩家角色蓝图UI按键逻辑UI与数据表绑定1.创建数据表2.创建UI控件3.玩家角色蓝图UI按键逻辑4.UI与数据表绑定......
  • vue3+elementplus+axios+router的入门项目总结
    一、使用vite方式创建项目:1、创建空文件夹,用vscode打开空文件夹,终端上运行如下命令$npminitvite-app[项目名]:初始化项目$cd[项目名]:进入项目$npminstall:安装项目依赖$npmrundev:启动项目2、启动项目后会出现访问地址: 3、进入访问地址: 二、引入elementpuls......
  • quick_sort ——第k个数
    思路:本题就是一个快速排序的模板题,通过对数组中的数字进行从小到大排序,从左到右第k个数,但得注意数组下标是从0开始,所以答案应该是排序后数组下标为k-1如果您还不了解快速排序,请移步这篇文章,https://www.cnblogs.com/expect-999/p/17594345.html#include<iostream>#include......
  • QT 跨ui信号传输,用emit
    新建工程,随意即可,主要记录一下对应的关系在ui界面拉一个按钮和checkbox按钮添加一个新的界面界面类dialog弹窗即可类名默认在新ui里添加一个按钮用来发送信号的初始界面去切换checkbox按钮状态在widget界面里给pushButton按钮写一个槽函数来触发dialog弹......
  • 使用squid代理上网
    背景有个客户在云上买了若干云服务器,和1个公网ip,但是他希望所有服务器都能访问外网。可是并没有采购NAT网关,所有退而求其次,使用squid代理的方式实现所有无公网ip的云服务器代理上网。规划 具体步骤1、选其中一台主机绑定公网ip,使其具备访问公网的能力,我们选择192.168.1.5这......
  • Python-GUI-编程(五)
    PythonGUI编程(五)原文:zh.annas-archive.org/md5/9d5f7126bd532a80dd6a9dce44175aaa译者:飞龙协议:CCBY-NC-SA4.0第十二章:使用Canvas小部件可视化数据在数据库中记录了数月的实验数据后,现在是开始可视化和解释数据的过程。你的同事分析师们询问程序本身是否可以创建图形......
  • Python-GUI-编程(一)
    PythonGUI编程(一)原文:zh.annas-archive.org/md5/9d5f7126bd532a80dd6a9dce44175aaa译者:飞龙协议:CCBY-NC-SA4.0前言响应式图形用户界面(GUI)帮助您与应用程序交互,提高用户体验,并增强应用程序的效率。使用Python,您将可以访问精心设计的GUI框架,可以用来构建与众不同的交互......
  • Python-GUI-编程(七)
    PythonGUI编程(七)原文:zh.annas-archive.org/md5/9d5f7126bd532a80dd6a9dce44175aaa译者:飞龙协议:CCBY-NC-SA4.0第十九章:数据库处理数据库处理在任何应用程序中都起着重要作用,因为数据需要存储以备将来使用。您需要存储客户信息、用户信息、产品信息、订单信息等。在本章......
  • Python-GUI-编程(八)
    PythonGUI编程(八)原文:zh.annas-archive.org/md5/9d5f7126bd532a80dd6a9dce44175aaa译者:飞龙协议:CCBY-NC-SA4.0第二十二章:使用谷歌地图在本章中,您将学习如何在Python应用程序中使用谷歌地图,并探索谷歌提供的不同优势。您将学习以下任务:查找位置或地标的详细信息......