momentjs实现DatePicker时间禁用

news2024/10/2 6:25:43

momentjs是一个处理时间的js库，简洁易用。

浅析一下， momentjs 在vue中对DatePicker时间组件的禁用实践。

一，npm下载

npm install moment --save

二，particles.json中

"dependencies": {
    "axios": "^0.18.0",
    "iview": "^3.4.0",
    "moment": "^2.24.0",
    "vue": "^2.5.10",
    "vue-i18n": "^7.8.0",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

三，引入使用

1.main.js中引入

import 'moment/locale/zh-cn'
moment.locale('zh-cn');  
Vue.prototype.$moment = moment;

2.页面或组件引入使用

import moment from "moment"

3.方法使用

moment().format('YYYY-MM-DD');  //获取格式

moment().startOf('month')  //获取当月第一天
moment().endOf('month')  //获取当月最后一天

moment().subtract(7, 'days')  //获取前7天
moment().subtract(4,'month')  //获取前4个月

更多方法参考momentjs官网：momentjs

4.应用实例

a,日期禁用

 pickerStart: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        },
      },

b,月份禁用

     pickerStart: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        },
      },

四，页面效果

a，禁用月份
在这里插入图片描述

b，禁用日期

在这里插入图片描述

五，完整代码

1，页面查询组件引用

a.引入

import DateSearch from "_c/date-search";
components: {DateSearch},

b.渲染

 <date-search ref="dateSearch">
      <span class="search-label">查询时间</span>
 </date-search>

c.获取时间

 let {S_createTime_GTOE, S_createTime_LTOE} = this.$refs.dateSearch.getDateSearch();
        this.queryParam.endTime =S_createTime_LTOE;
        this.queryParam.startTime=S_createTime_GTOE;

2.时间组件

a.月份组件

<template>
  <span>
    <slot />
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_GTOE"
        confirm
        clearable
        placement="bottom-end"
        class="search-input"
        :type="type"
        :format="format"
        :options="pickerStart"
        transfer
        @on-change="onStartDateChange"
      ></DatePicker>
    </FormItem>
    <span class="search-label">至</span>
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_LTOE"
        confirm
        clearable
        placement="bottom-end"
        :type="type"
        :format="format"
        class="search-input"
        :options="pickerEnd"
        transfer
        @on-change="onEndDateChange"
      ></DatePicker>
    </FormItem>
  </span>
</template>
<script>
import { convertUTCTimeToMonth } from "@/libs/tools";
import moment from "moment"
export default {
  props: {
    format: {
      type: String,
      default: "yyyy-MM",
    },
    type: {
      type: String,
      default: "month",
    },
    defaultTime: {
      type: Boolean,
      default: true,
    },
    searchField: {
      type: String,
      default: "createTime",
    },
  },
  data() {
    const today= moment().format('DD');
    return {
      condition: {
        S_createTime_GTOE: "",
        S_createTime_LTOE: "",
      },
      pickerStart: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startMonth;
            let endMonth;
            if(today<4){
              startMonth=moment().subtract(5, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
            return (
              time && time.valueOf() < new Date(startMonth).getTime() ||
              time.valueOf() > new Date(endMonth).getTime()
            );
        },
      },
    };
  },
  methods: {
    getDateSearch() {
      const defaultTime = this.defaultTime;
      let valid = true;
      let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
      if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
        S_createTime_GTOE = convertUTCTimeToMonth(S_createTime_GTOE, true);
      }
      if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
        S_createTime_LTOE = convertUTCTimeToMonth(S_createTime_LTOE, true);
      }
      if (defaultTime) {
        if (!S_createTime_GTOE) {
          this.$Message.warning("查询起始时间不能为空");
          valid = false;
        } else if (!S_createTime_LTOE) {
          this.$Message.warning("查询结束时间不能为空");
          valid = false;
        } 
        else if (S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        } 
      } else {
        if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        }
      }
      return {
        valid,
        [`S_${this.searchField}_GTOE`]: S_createTime_GTOE,
        [`S_${this.searchField}_LTOE`]: S_createTime_LTOE,
      };
    },
    onStartDateChange(date) {
      this.condition.S_createTime_GTOE = date;
    },
    onEndDateChange(date) {
      this.condition.S_createTime_LTOE = date;
    },
    getDefaultTime() {
            let startMonth;
            let endMonth;
            let today= moment().format('DD'); //30
            if(today<4){
              startMonth=moment().subtract(4, "month").format("YYYY-MM");
              endMonth=moment().subtract(2, "month").format("YYYY-MM");
            }
            if(today>4||today==4){
              startMonth=moment().subtract(3, "month").format("YYYY-MM");
              endMonth=moment().subtract(1, "month").format("YYYY-MM");
            }
        return [startMonth,endMonth]
    },
    resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
        this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
    }
  },
  created() {
    this.resetDateSearch();
  },
};
</script>

convertUTCTimeToMonth 方法

// 时间到月(年/月)
export const convertUTCTimeToMonth = (UTCDateString) => {
  if (!UTCDateString) {
    return '-'
  }
  function formatFunc (str) { 
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString)
  let year = date2.getFullYear()
  let mon = formatFunc(date2.getMonth() + 1)
  let day = formatFunc(date2.getDate())
  let hour = date2.getHours()
  hour = formatFunc(hour)
  let min = formatFunc(date2.getMinutes())
  let second = formatFunc(date2.getSeconds())
  let dateStr = year + '-' + mon
  return dateStr
}

b.日期组件

<template>
  <span>
    <slot />
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_GTOE"
        confirm
        clearable
        placement="bottom-end"
        class="search-input"
        :type="type"
        :format="format"
        :options="pickerStart"
        transfer
        @on-change="onStartDateChange"
      ></DatePicker>
    </FormItem>
    <span class="search-label">至</span>
    <FormItem>
      <DatePicker
        v-model="condition.S_createTime_LTOE"
        confirm
        clearable
        placement="bottom-end"
        :type="type"
        :format="format"
        class="search-input"
        :options="pickerEnd"
        transfer
        @on-change="onEndDateChange"
      ></DatePicker>
    </FormItem>
  </span>
</template>
<script>
import { convertUTCTimeToDate } from "@/libs/tools";
import moment from "moment"
export default {
  props: {
    format: {
      type: String,
      default: "yyyy-MM-dd",
    },
    type: {
      type: String,
      default: "date",
    },
    defaultTime: {
      type: Boolean,
      default: true,
    },
    searchField: {
      type: String,
      default: "createTime",
    },
  },
  data() {
    const today= moment().format('DD');
    return {
      condition: {
        S_createTime_GTOE: "",
        S_createTime_LTOE: "",
      },
      pickerStart: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        }
      },
      pickerEnd: {
        disabledDate(time) {
            let startDate;
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(5,'month').endOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(4,'month').endOf('month').format('YYYY-MM-DD');
            }
            return (
              time && time.valueOf() < new Date(startDate).getTime() ||
              time.valueOf() > new Date(endDate).getTime()
            );
        },
      },
    };
  },
  methods: {
    getDateSearch() {
      const defaultTime = this.defaultTime;
      let valid = true;
      let { S_createTime_GTOE, S_createTime_LTOE } = this.condition;
      if (S_createTime_GTOE && typeof S_createTime_GTOE === "object") {
        S_createTime_GTOE = convertUTCTimeToDate(S_createTime_GTOE, true);
      }
      if (S_createTime_LTOE && typeof S_createTime_LTOE === "object") {
        S_createTime_LTOE = convertUTCTimeToDate(S_createTime_LTOE, true);
      }
      if (defaultTime) {
        if (!S_createTime_GTOE) {
          this.$Message.warning("查询起始时间不能为空");
          valid = false;
        } else if (!S_createTime_LTOE) {
          this.$Message.warning("查询结束时间不能为空");
          valid = false;
        } 
        else if (S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        } 
      } else {
        if (S_createTime_LTOE && S_createTime_LTOE < S_createTime_GTOE) {
          this.$Message.warning("结束时间不能早于起始时间");
          valid = false;
        }
      }
      return {
        valid,
        [`S_${this.searchField}_GTOE`]: S_createTime_GTOE.split(" ")[0],
        [`S_${this.searchField}_LTOE`]: S_createTime_LTOE.split(" ")[0],
      };
    },
    onStartDateChange(date) {
      this.condition.S_createTime_GTOE = date;
    },
    onEndDateChange(date) {
      this.condition.S_createTime_LTOE = date;
    },
    getDefaultTime() {
            let startDate;
            let today= moment().format('DD'); //30
            let endDate=moment().subtract(4, "days").format("YYYY-MM-DD");
            if(today<4){
              startDate=moment().subtract(4,'month').startOf('month').format('YYYY-MM-DD');
            }
            if(today>4||today==4){
              startDate=moment().subtract(3,'month').startOf('month').format('YYYY-MM-DD');
            }
        return [startDate,endDate]
    },
    resetDateSearch(){
      if(this.defaultTime){
        this.condition.S_createTime_GTOE = this.getDefaultTime()[0],
        this.condition.S_createTime_LTOE = this.getDefaultTime()[1]
      }else{
        this.condition.S_createTime_GTOE = ""
        this.condition.S_createTime_LTOE = ""
      }
    }
  },
  created() {
    this.resetDateSearch();
  },
};
</script>

convertUTCTimeToDate

// 时间到日期(年/月/日)
export const convertUTCTimeToDate = (UTCDateString) => {
  if (!UTCDateString) {
    return '-'
  }
  function formatFunc (str) {
    return str > 9 ? str : '0' + str
  }
  let date2 = new Date(UTCDateString)
  let year = date2.getFullYear()
  let mon = formatFunc(date2.getMonth() + 1)
  let day = formatFunc(date2.getDate())
  let hour = date2.getHours()
  hour = formatFunc(hour)
  let min = formatFunc(date2.getMinutes())
  let second = formatFunc(date2.getSeconds())
  let dateStr = year + '-' + mon + '-' + day
  return dateStr
}

<完>
在这里插入图片描述

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

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

相关文章

【C++技能树】多态解析

【C++技能树】多态解析

Halo&#xff0c;这里是Ppeua。平时主要更新C&#xff0c;数据结构算法&#xff0c;Linux与ROS…感兴趣就关注我bua&#xff01; 文章目录 0.多态的概念0.1 多态的定义 1. 重写2.Final与Override3.抽象类4.多态中的内存分布.4.1虚表存在哪里? 5.多态调用原理5.1 动态绑定与静…
阅读更多...
解锁前端Vue3宝藏级资料 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )

解锁前端Vue3宝藏级资料 第一章 Vue3项目创建 3 (Vite 创建 vue项目 )

目前&#xff0c;Vue.js 官网建议在创建新项目的时候要使用 Vite 而不是 Vue CLI&#xff0c;尽量在开发环境中以 Vite 它作为 Vue.js 的编译基础来使用。Vite 是 Vue.js 作者Evan You 制作的 webpack 的无捆绑替代品&#xff0c;Vite vue 方式很可能会成为未来的vue项目主流方…
阅读更多...
Spring学习|Spring配置：别名、import、依赖注入：构造器注入、Set方式注入（重点）、拓展方式注入

Spring学习|Spring配置：别名、import、依赖注入：构造器注入、Set方式注入（重点）、拓展方式注入

Spring配置 别名 我们可以在bean.xml中用alias标签给bean对象起一个别名&#xff0c;当我们在客户端通过context对象使用getBean方法获取对象时&#xff0c;可以通过这个别名获取&#xff0c;另一种方式是&#xff0c;可以在<bean标签后面加一个name&#xff0c;这个name后…
阅读更多...
js 根据键判断值

js 根据键判断值

最原始的写法&#xff1a; 改进后的写法&#xff1a; const DeviceTypeObj {SO2: "SO<sub>2</sub>",CO: "CO",NO: "NO",NO2: "NO<sub>2</sub>",O3: "O<sub>3</sub>", let value Dev…
阅读更多...
亿发软件：智慧门店商超系统，2023新零售POS数字运营一体化管理

亿发软件：智慧门店商超系统，2023新零售POS数字运营一体化管理

2023年9月6日&#xff0c;山东济宁一家超市因为酸奶价格标签错误而引发了广泛关注。标签原本显示几十个人为9.9元&#xff0c;但特价销售价却标为10元。这一小小的错误却在社交媒体上引发了轩然大波&#xff0c;让超市一度处于舆论的风口浪尖。超市工作人员回应&#xff0c;表示…
阅读更多...
Python基础语法：数据分析利器

Python基础语法：数据分析利器

⭐️⭐️⭐️⭐️⭐️欢迎来到我的博客⭐️⭐️⭐️⭐️⭐️ &#x1f434;作者&#xff1a;秋无之地 &#x1f434;简介&#xff1a;CSDN爬虫、后端、大数据领域创作者。目前从事python爬虫、后端和大数据等相关工作&#xff0c;主要擅长领域有&#xff1a;爬虫、后端、大数据…
阅读更多...
网络技术十四：文件传输协议

网络技术十四：文件传输协议

文件传输协议 FTP 定义 文件传输协议 客户端/服务器模型&#xff0c;具备身份验证功能 双TCP连接 端口 采用双TCP连接方式 控制连接: 21 用于传输FTP命令和执行信息 用于在FTP客户端和FTP服务器之间传输FTP控制命令及命令执行信息。控制连接在整个FTP会话期间一直保持打开…
阅读更多...
儿童安全门和围栏，以及游戏围栏等美国站要求的合规标准是什么?

儿童安全门和围栏，以及游戏围栏等美国站要求的合规标准是什么?

儿童安全门和围栏 儿童安全门和围栏用于在门口&#xff08;如门道&#xff09;内设置围栏&#xff0c;或用作自支撑围栏&#xff0c;将幼儿可能在其中活动的区域围起来。这些商品可能由塑料、金属、乙烯树脂或木制组件等材料制成。此政策包括但不限于可扩展围栏、伸缩安全门和…
阅读更多...
【系统设计系列】 负载均衡和反向代理

【系统设计系列】 负载均衡和反向代理

系统设计系列初衷 System Design Primer&#xff1a; 英文文档 GitHub - donnemartin/system-design-primer: Learn how to design large-scale systems. Prep for the system design interview. Includes Anki flashcards. 中文版&#xff1a; https://github.com/donnemart…
阅读更多...
uniapp使用H5实现预览pdf文件

uniapp使用H5实现预览pdf文件

下载后把压缩包解压到自己的项目的static文件夹下的pdf文件下&#xff0c;如图 新建一个文件名为filePreview.vue <template><view><web-view :src"allUrl"></web-view></view> </template><script>export default {dat…
阅读更多...
老师设计的库CRC计算

老师设计的库CRC计算

001 CRC计算 C0 67 E1 00 01 00 DE DD C1 未加粗的代入计算 data_len USART_RX_BUF[3] * 256 USART_RX_BUF[4] 8;//这里数组第3个和第4个计算长度 综合上面的 00 01 计算结果为“9” crc_result check_calc_crc16(data_len, USART_RX_BUF); //crc_result结果:0正确;1错误…
阅读更多...
【HTML专栏1】语法规范、基础结构标签

【HTML专栏1】语法规范、基础结构标签

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…
阅读更多...
网络技术十八：VLAN间路由静态路由路由协议概述

网络技术十八：VLAN间路由静态路由路由协议概述

VLAN间路由 定义 指导设备对不同vlan间进行三层数据转发 实现方式 单臂路由 交换机上划分多个VLAN 路由器单线连接到交换机 路由器接口 划分若干子接口&#xff0c;子接口的IP为下连vlan的网关&#xff0c;并绑定相应vlan 交换机接口 配置TRUNK&#xff0c;允许所有v…
阅读更多...
数据库顶会 VLDB 2023 论文解读：字节跳动如何解决超大规模流式任务运维难题

数据库顶会 VLDB 2023 论文解读：字节跳动如何解决超大规模流式任务运维难题

本文解读了新加坡国立大学马天白教授团队、字节跳动基础架构-计算-流式计算团队联合发表在国际数据库与数据管理顶级会议 VLDB 2023 上的论文“StreamOps: Cloud-Native Runtime Management for Streaming Services in ByteDance”&#xff0c;介绍字节跳动内部基于数万 Flink …
阅读更多...
vue使用谷歌地图实现地点查询

vue使用谷歌地图实现地点查询

效果 代码 首先在index.html中引入谷歌地图资源 <script src"https://maps.googleapis.com/maps/api/js?key你的api密钥&librariesplaces"></script>页面中 <template><div class"pac-card div-style" id"pac-card"…
阅读更多...
OpenResty介绍及实现限流

OpenResty介绍及实现限流

1 背景描述 Nginx作为一个高性能的Web服务器和反向代理服务器&#xff0c;已经稳定运行了多年。然而&#xff0c;考虑到后续分馆流量的接入&#xff0c;会对我们的系统造成难以预估的影响&#xff0c;因此在网关层对流量进行监控并管理就显得格外重要。本次调研目标为OpenRest…
阅读更多...
【PowerQuery】Excel的PowerQuery的连接组的导入与导出

【PowerQuery】Excel的PowerQuery的连接组的导入与导出

完成我们当前的数据连接之后，如果使用数据的用户不在本机该怎么办呢？这时候通常有两种方式来实现对于需要的数据访问。 将文件本身提供给最终用户如果数据文件本身不涉及到敏感数据连接定义，或者需要数据脱敏操作则比较适合使用这种方法提供给最终用户。但是如果使用的数据有…
阅读更多...
IT运维监控系统和网络运维一样吗

IT运维监控系统和网络运维一样吗

IT运维监控系统和网络运维不是一样的。IT运维监控系统是一系列IT管理产品的统称&#xff0c;它所包含的产品功能强大、易于使用、解决方案齐全&#xff0c;可一站式满足用户的各种IT管理需求。而网络运维是指对网络设备进行监控、维护和管理&#xff0c;包括硬件故障的排除、软…
阅读更多...
idea VCS配置多个远程仓库

idea VCS配置多个远程仓库

Idea VCS配置多个远程仓库 首先要有连个远程仓库地址 idea 添加数据源 查看推送记录 添加数据源 ok之后填写账号密码 推送本地项目 选择不同远程地址 push 查看不同远程地址的 不同分支的 推送记录 不期而遇的温柔&#xff1a; 应用开源架构进行项目开发&#xff0c;特别是那…
阅读更多...
android 注解详解

android 注解详解

1&#xff0c;注解的概念 注解现在广泛的应用于android的各个开源框架中&#xff0c;不理解注解&#xff0c;我们就无法更好的提升我们的架构能力。那么什么是注解呢&#xff1f;注解&#xff08;Annotation&#xff09;&#xff0c;是JDK5.0 引入的一种注释机制。 注解是元数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023