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.mzph.cn/news/70818.shtml

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

相关文章

单片机第三季-第一课：STM32基础

单片机第三季-第一课：STM32基础

官方网址&#xff1a;STMCU中文官网 STM32系列分类&#xff1a; 型号命名原则&#xff1a; STM32F103系列&#xff1a; 涉及到的几个概念&#xff1a; DMA&#xff1a;Direct Memory Access&#xff0c;直接存储器访问。DMA传输将数据从一个地址空间复制到另一个地址空间&…
阅读更多...
系统学习Linux-zabbix监控平台

系统学习Linux-zabbix监控平台

一、zabbix的基本概述 zabbix是一个监控软件&#xff0c;其可以监控各种网络参数&#xff0c;保证企业服务架构安全运营&#xff0c;同时支持灵活的告警机制&#xff0c;可以使得运维人员快速定位故障、解决问题。zabbix支持分布式功能&#xff0c;支持复杂架构下的监控解决方…
阅读更多...
DataTable扩展 列转行方法（2*2矩阵转换）

DataTable扩展 列转行方法（2*2矩阵转换）

源数据 如图所示 // <summary>/// DataTable扩展 列转行方法&#xff08;2*2矩阵转换&#xff09;/// </summary>/// <param name"dtSource">数据源</param>/// <param name"columnFilter">逗号分隔 如SDateTime,PM25,PM10…
阅读更多...
【QT】使用qml的QtWebEngine遇到的一些问题总结

【QT】使用qml的QtWebEngine遇到的一些问题总结

在使用qt官方的一些QML的QtWebEngine相关的例程的时候&#xff0c;有时在运行会报如下错误&#xff1a; WebEngineContext used before QtWebEngine::initialize() or OpenGL context creation failed 这个问题在main函数里面最前面加上&#xff1a; QCoreApplication::setAttr…
阅读更多...
Linux下的系统编程——认识进程（七）

Linux下的系统编程——认识进程（七）

前言&#xff1a; 程序是指储存在外部存储(如硬盘)的一个可执行文件, 而进程是指处于执行期间的程序, 进程包括 代码段(text section) 和 数据段(data section), 除了代码段和数据段外, 进程一般还包含打开的文件, 要处理的信号和CPU上下文等等.下面让我们开始对Linux进程有个…
阅读更多...
利用transform和border 创造简易图标，以适应uniapp中多字体大小情况下的符号问题

利用transform和border 创造简易图标，以适应uniapp中多字体大小情况下的符号问题

heml: <text class"icon-check"></text> css: .icon-check {border: 2px solid black;border-left: 0;border-top: 0;height: 12px;width: 6px;transform-origin: center;transform: rotate(45deg);} 实际上就是声明一个带边框的div 将其中相邻的两边去…
阅读更多...
java八股文面试[数据库]——主键的类型自增还是UUID

java八股文面试[数据库]——主键的类型自增还是UUID

auto_increment的优点&#xff1a; 字段长度较uuid小很多&#xff0c;可以是bigint甚至是int类型&#xff0c;这对检索的性能会有所影响。 在写的方面&#xff0c;因为是自增的&#xff0c;所以主键是趋势自增的&#xff0c;也就是说新增的数据永远在后面&#xff0c;这点对于…
阅读更多...
Android之 SVG绘制

Android之 SVG绘制

一 SVG介绍 1.1 SVG&#xff08;Scalable Vector Graphics&#xff09;是可缩放矢量图形的缩写&#xff0c;它是一种图形格式&#xff0c;其中形状在XML中指定&#xff0c; 而XML又由SVG查看器呈现。 1.2 SVG可以区别于位图&#xff0c;放大可以做到不模糊&#xff0c;可以做…
阅读更多...
Vagrant + VirtualBox + CentOS7 + WindTerm 5分钟搭建本地linux开发环境

Vagrant + VirtualBox + CentOS7 + WindTerm 5分钟搭建本地linux开发环境

1、准备阶段 将环境搭建所需要的工具和文件下载好&#xff08;页面找不到可参考Tips部分&#xff09; Vagrant 版本&#xff1a;vagrant_2.2.18_x86_64.msi 链接&#xff1a;https://developer.hashicorp.com/vagrant/downloads VirtualBox 版本&#xff1a;VirtualBox-6.1.46…
阅读更多...
无涯教程-JavaScript - DAYS360函数

无涯教程-JavaScript - DAYS360函数

描述 DAYS360函数返回基于360天的年份(十二个月为30天)的两个日期之间的天数,该天数用于会计计算。 语法 DAYS360 (start_date,end_date,[method])争论 Argument描述Required/OptionalStart_dateThe two dates between which you want to know the number of days.Required…
阅读更多...
基于SpringBoot的医院挂号系统

基于SpringBoot的医院挂号系统

基于SpringBootVue的医院挂号、预约、问诊管理系统&#xff0c;前后端分离 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBoot、Vue、Mybaits Plus、ELementUI工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 角色&#xff1a;管理员、用户、医生 管…
阅读更多...
Android Jetpack Compose 用计时器demo理解Compose UI 更新的关键-------状态管理（State)

Android Jetpack Compose 用计时器demo理解Compose UI 更新的关键-------状态管理（State)

目录 概述1.什么是状态2.什么是单向数据流3.理解Stateless和Stateful4.使用Compose实现一个计数器4.1 实现计数器4.2 增加组件复用性-----状态上提 总结 概述 我们都知道了Compose使用了声明式的开发范式&#xff0c;在这样的范式中&#xff0c;UI的职责更加的单一&#xff0c…
阅读更多...
es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

es5的实例__proto__(原型链) prototype(原型对象) {constructor:构造函数}

现在看这张图开始变得云里雾里&#xff0c;所以简单回顾一下 prototype 的基本内容&#xff0c;能够基本读懂这张图的脉络。 先介绍一个基本概念&#xff1a; function Person() {}Person.prototype.name KK;let person1 new Person();在上面的例子中&#xff0c; Person …
阅读更多...
腾讯混元助手使用指南

腾讯混元助手使用指南

一、腾讯混元助手简介 腾讯混元助手是什么&#xff1f; 腾讯混元助手是由腾讯研发的大语言模型的平台产品&#xff0c;具备跨领域知识和自然语言理解能力&#xff0c;实现基于人机自然语言对话的方式&#xff0c;理解用户指令并执行任务&#xff0c;帮助用户实现人获取信息&am…
阅读更多...
SpringBoot整合Websocket（Java websocket怎么使用）

SpringBoot整合Websocket（Java websocket怎么使用）

目录 1 Websocket是什么2 Websocket可以做什么3 Springboot整合Websocket3.1 服务端3.2 客户端 1 Websocket是什么 WebSocket 是一种基于 TCP 协议的全双工通信协议&#xff0c;可以在浏览器和服务器之间建立实时、双向的数据通信。可以用于在线聊天、在线游戏、实时数据展示等…
阅读更多...
算法通关村第十七关：青铜挑战-贪心其实很简单

算法通关村第十七关：青铜挑战-贪心其实很简单

青铜挑战-贪心其实很简单 1. 难以解释的贪心算法 贪心学习法则&#xff1a;直接做题&#xff0c;不考虑贪不贪心 贪心(贪婪)算法 是指在问题尽心求解时&#xff0c;在每一步选择中都采取最好或者最优&#xff08;最有利&#xff09;的选择&#xff0c;从而希望能够导致结果最…
阅读更多...
【爬虫笔记】Python爬虫简单运用爬取代理IP

【爬虫笔记】Python爬虫简单运用爬取代理IP

一、前言 近些年来&#xff0c;网络上的爬虫越来越多&#xff0c;很多网站都针对爬虫进行了限制&#xff0c;封禁了一些不规则的请求。为了实现正常的网络爬虫任务&#xff0c;爬虫常用代理IP来隐藏自己的真实IP&#xff0c;避免被服务器封禁。本文将介绍如何使用Python爬虫来…
阅读更多...
百度智能云千帆大模型丨未来人手必备的代码助手

百度智能云千帆大模型丨未来人手必备的代码助手

文章目录 1. 前言2. 千帆大模型平台3. 十分友好的功能4. comate代码助手5. 总结 1. 前言 我之前给大家推荐过Poe这个网站&#xff0c;它用的人比较少&#xff0c;但一旦接触后会发现它其实挺强大的。 因为它是一个可以同时支持好几个大模型的在线聚合平台。常用的GPT4&#x…
阅读更多...
基于阻塞队列的生产消费模型

基于阻塞队列的生产消费模型

目录 一、线程同步 1.生产消费模型&#xff08;或生产者消费者模型&#xff09; 2.认识同步 &#xff08;1&#xff09;生产消费模型中的同步 &#xff08;2&#xff09;生产者消费者模型的特点 二、条件变量 1.认识条件变量 2.条件变量的使用 3.代码改造 三、基于阻…
阅读更多...
uniapp移动端h5设计稿还原

uniapp移动端h5设计稿还原

思路 动态设置html的font-size大小 实现步骤 先创建一个public.css文件&#xff0c;设置初始的font-size大小 /* 注意这样写 只能使用css文件, scss 是不支持的, setProperty 只适用于原生css上 */ html {--gobal-font-size: 0.45px; } .gobal-font-size {font-size: var(--g…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023