momentjs实现DatePicker时间禁用

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><DatePickerv-model="condition.S_createTime_GTOE"confirmclearableplacement="bottom-end"class="search-input":type="type":format="format":options="pickerStart"transfer@on-change="onStartDateChange"></DatePicker></FormItem><span class="search-label">至</span><FormItem><DatePickerv-model="condition.S_createTime_LTOE"confirmclearableplacement="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'); //30if(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 + '-' + monreturn dateStr
}

b.日期组件

<template><span><slot /><FormItem><DatePickerv-model="condition.S_createTime_GTOE"confirmclearableplacement="bottom-end"class="search-input":type="type":format="format":options="pickerStart"transfer@on-change="onStartDateChange"></DatePicker></FormItem><span class="search-label">至</span><FormItem><DatePickerv-model="condition.S_createTime_LTOE"confirmclearableplacement="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'); //30let 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 + '-' + dayreturn dateStr
}

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

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

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

相关文章

ICCV 2023 | MoCoDAD：一种基于人体骨架的运动条件扩散模型，实现高效视频异常检测

ICCV 2023 | MoCoDAD：一种基于人体骨架的运动条件扩散模型，实现高效视频异常检测

论文链接&#xff1a; https://arxiv.org/abs/2307.07205 视频异常检测&#xff08;Video Anomaly Detection&#xff0c;VAD&#xff09;扩展自经典的异常检测任务&#xff0c;由于异常情况样本非常少见&#xff0c;因此经典的异常检测通常被定义为一类分类问题&#xff08;On…
阅读更多...
从0到1构建界面设计系统思维

从0到1构建界面设计系统思维

用户界面&#xff08;UI&#xff09;是人与机器之间发生交互的载体&#xff0c;也是用户体验&#xff08;UX&#xff09;的一个组成部分。用户界面由两个主要部分组成&#xff1a;视觉设计&#xff08;即传达产品的外观和感觉&#xff09;和交互设计&#xff08;即元素的功能和…
阅读更多...
中国ui设计师年终工作总结

中国ui设计师年终工作总结

一、萌芽阶段 记得初次应聘时&#xff0c;我对公司的认识仅仅局限于行业之一&#xff0c;对UI设计师一职的认识也局限于从事相对单纯的界面的设计创意和美术执行工作。除此之外&#xff0c;便一无所知了。所以&#xff0c;试用期中如何去认识、了解并熟悉自己所从事的行业&…
阅读更多...
如何区分异动电动机和同步电动机

如何区分异动电动机和同步电动机

在日常的工作生活中&#xff0c;会遇到很多种不同类型的电动机&#xff0c;比如直流电机、步行电机和伺服电机等等。其中交流电机分为异动电动机和同步电动机两种&#xff0c;那么同步电动机和异步电动机到底有什么区别呢&#xff1f; 转速 同步电动机定子绕组三相电流所产生…
阅读更多...
InnoDB 的默认隔离级别是什么？

InnoDB 的默认隔离级别是什么？

分析&回答 大部分数据库系统&#xff08;如Oracle&#xff09;都将都将读提交&#xff08;Read-Commited&#xff09;作为默认隔离级别&#xff0c;而MySQL却选择可重复读&#xff08;Repeatable-Read&#xff09;作为其默认隔离级别。 如果没有隔离级别基础知识的话先看…
阅读更多...
Ansible-roles学习

Ansible-roles学习

目录 一.roles角色介绍二.示例一.安装httpd服务 一.roles角色介绍 roles能够根据层次型结构自动装载变量文件&#xff0c;tasks以及handlers登。要使用roles只需在playbook中使用include指令即可。roles就是通过分别将变量&#xff0c;文件&#xff0c;任务&#xff0c;模块以…
阅读更多...
Java基础知识点汇总

Java基础知识点汇总

一、Java基础知识点整体框架 详细知识点见链接资源&#xff0c;注&#xff1a;框架是用Xmind App完成&#xff0c;查看需下载。 二、基础知识各部分概况 2.1 认识Java 2.2 数据类型和变量 2.3 运算符 2.4 程序逻辑控制 2.5 方法的使用 2.6 数组的定义和使用 2.7 类和对象 2.8 …
阅读更多...
【HTML专栏2】VSCode的使用（新建HTML文件）

【HTML专栏2】VSCode的使用（新建HTML文件）

本文属于HTML/CSS专栏文章&#xff0c;适合WEB前端开发入门学习&#xff0c;详细介绍HTML/CSS如果使用&#xff0c;如果对你有所帮助请一键三连支持&#xff0c;对博主系列文章感兴趣点击下方专栏了解详细。 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;HTML/CS…
阅读更多...
ChatGPT集锦

ChatGPT集锦

目录 1. 一条指令让ChatGPT变的更强大2. 对ChatGPT提问时，常见的10种错误描述3. Custom instructions如何设置1. 一条指令让ChatGPT变的更强大 在使用GPT的过程中，如何让AI更清晰地了解你的需求很重要？今天分享一个指令，可以让GPT成为你的好同事，与你一起分析和解决问题，…
阅读更多...
torch.nn中的L1Loss和MSELoss

torch.nn中的L1Loss和MSELoss

我们打开Pytorch官网&#xff0c;找到torch.nn中的loss function&#xff0c;进去如下图所示。 L1LOSS 我们先来看看 L1LOSS 损失函数的使用。下图是官网给出的描述。 L1loss有两种方式&#xff0c;一种是将所有误差累加作为总损失&#xff0c;另一种是将所有误差累加之后求平…
阅读更多...
2023年高教社杯全国大学生数学建模竞赛参赛事项注意

2023年高教社杯全国大学生数学建模竞赛参赛事项注意

MathClub数模资源&#xff0c;含专属思路 资源链接&#xff1a;点击这里获取众多数模资料、思路精讲、论文模板latex和word、学习书籍等 2023高教社杯数学建模国赛–赛前准备 一年一度的数学建模国赛要来啦&#xff01;&#xff01;&#xff01;小编仔细阅读了比赛官方网站上…
阅读更多...
附录1-爬虫的一些技巧

附录1-爬虫的一些技巧

目录 1 寻找url与显示内容的关系 2 修改请求头 3 局部刷新 4 阅读返回信息 5 多尝试页面其他的使用方式 6 尝试不同类型参数 7 表单类型的post多用data发&#xff0c;接口类型的post多用json发 8 消除degger 9 你在浏览器上看到的html与你下载下来的html不一…
阅读更多...
【LeetCode-中等题】47. 全排列 II

【LeetCode-中等题】47. 全排列 II

文章目录 组合并集问题汇总&#xff1a;题目方法一&#xff1a;递归回溯去重 组合并集问题汇总&#xff1a; 1、子集去重版本 2、组合非去重版本 3、子集非去重版本 题目 相比较46题&#xff1a;不需要去重&#xff1a;【LeetCode-中等题】46. 全排列 需要做出的改变就是&a…
阅读更多...
C++ continue 语句

C++ continue 语句

C 中的 continue 语句有点像 break 语句。但它不是强迫终止&#xff0c;continue 会跳过当前循环中的代码&#xff0c;强迫开始下一次循环。 对于 for 循环&#xff0c;continue 语句会导致执行条件测试和循环增量部分。对于 while 和 do…while 循环&#xff0c;continue 语句…
阅读更多...
CVE-2023-3836：大华智慧园区综合管理平台任意文件上传漏洞复现

CVE-2023-3836：大华智慧园区综合管理平台任意文件上传漏洞复现

文章目录 CVE-2023-3836&#xff1a;大华智慧园区综合管理平台任意文件上传漏洞复现0x01 前言0x02 漏洞描述0x03 影响范围0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现 CVE-2023-3836&#xff1a;大华智慧园区综合管理平台任意文件上传漏洞复现 0x01 前言 免责声…
阅读更多...
虚拟机的ubuntu 22.04无法联网问题解决

虚拟机的ubuntu 22.04无法联网问题解决

问题&#xff1a;虚拟机的ubuntu 22.04无法联网 解决&#xff1a; 找到一种配置的方式&#xff0c;使用命令&#xff1a;sudo dhclient -v
阅读更多...
maven本地安装jar包install-file，解决没有pom的问题

maven本地安装jar包install-file，解决没有pom的问题

背景&#xff1a; 公司因为权限问题&#xff0c;没有所有的代码&#xff0c;内部maven还在搭建&#xff0c;所以需要拿到同事的jar包&#xff0c;本地install&#xff1a; mvn install:install-file -DgroupIdcom..framework -DartifactIdcloud-api -Dversion1.0.0-SNAPSHOT …
阅读更多...
Vue echarts 饼图 引导线加小圆点，文字分行展示

Vue echarts 饼图 引导线加小圆点，文字分行展示

需求 重点代码 完整代码 initChart() {// 创建 echarts 实例。var myChartOne this.$echarts.init(this.$refs.Echart);myChartOne.setOption({tooltip: {trigger: "item",},title: {top: center,text: [{name| this.chartTitle.name },{value| this.chartTitle.…
阅读更多...
数学建模--G(1,1)型的灰色预测模型的Python实现

数学建模--G(1,1)型的灰色预测模型的Python实现

目录 1.算法适用情况 2.算法推演步骤 3.算法核心代码 4.算法效果展示 1.算法适用情况 #1.灰色预测模型简介 """ 1.灰色预测是对既含有已知信息又含有不确定信息的系统进行预测&#xff0c;就是对在一定范围内变化的、与时间有关的灰色过程进行预测。 2.灰色预测…
阅读更多...
学妹学Java（一）

学妹学Java（一）

⭐简单说两句⭐ 作者&#xff1a;后端小知识 CSDN个人主页&#xff1a;后端小知识 &#x1f50e;GZH&#xff1a;后端小知识 &#x1f389;欢迎关注&#x1f50e;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; Hello&#xff0c;亲爱的各位友友们&#xff0c;好久不见&#xff0…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023