Vue->Template:

<a-date-picker
v-model="value"
:disabled-date="disabledDate"
/>

Vue->Methods:

// 设置不可选择的日期
disabledDate (current) {
this.value = undefined
switch (this.data.dateRange) {
// 近一周
case 'nearWeek':
{
// 计算今天是这周第几天 周日为一周中的第一天
const weekOfday = parseInt(this.moment().format('d'))
// 获取当前周的开始结束时间
const weekStart = this.moment().subtract(weekOfday - 1, 'days')
const weekEnd = this.moment().add(7 - weekOfday, 'days')
// 设置区间之外的日期不可选
return current < weekStart.subtract(1, 'days') || current > weekEnd
}
// 近半月
case 'nearHalfMonth':
{
// 获取本月开始结束时间
const monthStart = this.moment().startOf('month')
const monthEnd = this.moment().endOf('month')
// 区间开始结束
let start, end
// 计算今天是这月第几天
const monthOfday = parseInt(this.moment().format('D'))
// 判断是否处于前半月还是后半月
if (monthOfday < 15) {
// 前半月区间:1 ~ 15
start = monthStart
end = this.moment(start).add('days', 14)
} else {
// 后半月区间:16 ~ 月末最后一天
start = this.moment(this.moment().format('YYYY-MM') + '-16')
end = monthEnd
}
// 设置区间之外的日期不可选
return current < start || current > end.add('days', 1)
}
// 近一月
case 'nearMonth':
{
// 获取本月开始结束时间
const monthStart = this.moment().startOf('month')
const monthEnd = this.moment().endOf('month')
// 设置区间之外的日期不可选
return current < monthStart || current > monthEnd.add('days', 1)
}
// 近半年
case 'nearHalfYear':
{
// 获取今年开始结束时间
const yearStart = this.moment().startOf('year')
const yearEnd = this.moment().endOf('year')
// 区间开始结束
let start, end
// 获取今年天数
const yearDays = this.moment(yearEnd).diff(yearStart, 'days')
// 计算今天是今年第几天
const yearOfday = parseInt(this.moment().format('DDD'))
// 判断是否处于前半年还是后半年
if (yearOfday < (yearDays / 2)) {
// 前半年区间:今年开始时间 ~ 第二季度结束
start = yearStart
// 今年开始时间+2个季度-1天,即上半年结束时间(第二季度结束)
end = this.moment(yearStart).add('Q', 2).subtract(1, 'days')
} else {
// 后半年区间:第三季度开始 ~ 年末最后一天
// 今年开始时间+2个季度,即下半年开始时间
start = this.moment(yearStart).add('Q', 2)
end = yearEnd
}
// 设置区间之外的日期不可选
return current < start || current > end
}
// 近一年
case 'nearYear':
{
// 获取今年开始结束时间
const yearStart = this.moment().startOf('year')
const yearEnd = this.moment().endOf('year')
// 设置区间之外的日期不可选
return current < yearStart || current > yearEnd
}
}
return false
}

antdv时间选择a-date-picker设置日期可选范围(近一周、近半月、近一月等) - moment.js的更多相关文章

  1. asp.net使用My97 Date Picker时设置默认起始时间为n年之前的今天

    可以使用My97 Date Picker组件来收集用户输入的日期值. 首先下载该组件:http://www.my97.net/dp/index.asp放到自己的项目中. 然后在项目里面引用js和css ...

  2. element-ui日期组件DatePicker设置日期选择范围Picker Options

    element-UI提供了DatePicker日期选择器组件,可以让我们很方便的获取到日期,默认的选择是全部的日期都可以选择的,但是很多场景中我们要对日期选择范围做限定,比如出行日期就不能选过去的日期 ...

  3. JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;

    学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法 如何创建一个日期对象 语法:new Date(); 功能:创建一个日期时间对象 ...

  4. iOS开发UI篇—Date Picker和UITool Bar控件简单介绍

    iOS开发UI篇—Date Picker和UITool Bar控件简单介绍 一.Date Picker控件 1.简单介绍: Date Picker显示时间的控件 有默认宽高,不用设置数据源和代理 如何 ...

  5. SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");//设置日期格式

    java日期格式大全 format SimpleDateFormat(转) SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH ...

  6. Jquery ui datepicker 设置日期范围,如只能隔3天

    最近的后台项目前端使用了jquery ui 日历控件自然就使用了jquery ui 的   datepicker 后台数据比较好大,一般是千万级的和百万级的关联,查询会很慢,所以后加想多加些过滤条件, ...

  7. 【Shell】获取设置日期和延时

    1.读取日期 Linux:~ # date Mon Dec 17 03:16:53 EST 2018 2.格式日期并打印 Linux:~ # date "+%d %B %Y" 17 ...

  8. 【C#】datetimepicker里面如何设置日期为当天日期,而时间设为0:00或23:59?

    今天无意中发现要根据日期查询时间,datatimepicker控件会把时间默认成当前时间(当你的控件只显示日期时),这样查询出来的出来的数据会有误差,用来下面的办法成功设置日期为当天日期,而时间设为0 ...

  9. [Swift实际操作]七、常见概念-(6)日期Date和DateFormatter日期的格式化

    本文将为你演示日期类型的使用,以及如何对日期进行格式化. 首先引入需要使用到的界面框架 import UIKit 初始化一个日期对象,它的值和当前电脑中的日期相同 var date = Date() ...

随机推荐

  1. 下载数据到csv中(乱码),使用numpy , pandas读取失败 解决方案

    读取数据,下载数据到 csv 文件中 allUniv 列表类型[[...],[...]] 字符集编码使用 utf-8-sig with open('文件名.csv','w',newline='',en ...

  2. PHP array_diff_uassoc() 函数

    实例 比较两个数组的键名和键值(使用用户自定义函数比较键名),并返回差集: <?phpfunction myfunction($a,$b){if ($a===$b){return 0;}retu ...

  3. 笨办法学python3练习代码11-12:print()

    ex11.py print("How old are you? ",end = " ") #加入end = " ",则函数不再自动换行 ag ...

  4. 华为云GaussDB(DWS)内存知识点,你知道吗?

    前言 在日常数据库的使用中,难免会遇到一些内存问题.此次博文主要向大家分享一些华为云数仓GaussDB(DWS)内存的基本框架以及基本视图的使用,以便遇到内存问题后可以有一个基本的判断. 注意,本篇博 ...

  5. SqlServer 查询的几种方式以及数字函数、时间函数的应用总结(回归基础)

    --语法:select * from 表名 *表示查询所有字段数据 select * from Class select * from Student select * from RankingLis ...

  6. C++基础面试题及答案

    C++ C++ 和C的主要区别 C语言是面向过程编程,C++是面向对象编程,C++ 完全兼容C C++有哪些特性,简述对他们的理解 封装.继承.多态 封装 将的事物抽象成一个个集合(也就是所说的类), ...

  7. Vue3 为何使用 Proxy 实现数据监听

    博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...

  8. 【LeetCode/LintCode】 题解丨字节跳动试题:第k大的子数组

    给定一个长度为n的数组a,它有n(n+1)/2​​个子数组.请计算这些子数组的和,然后按照升序排列,并返回排序后第k个数. 1≤n≤10​^5 1≤a​i≤10^​9 1≤k≤​n(n+1)/2 在线 ...

  9. ASP.NET Core - 实现Http自定义请求头策略

    前言 在正常的情况下,当我们系统用到JWT认证方式时,需要在Http请求头添加Authorization: XXX,这样在后台服务的控制器中打上[Authorize]授权标签,就限定所有的请求必须通过 ...

  10. 2020-04-08:谈一下IOC底层原理

    Ioc的底层原理 (1)xml配置文件 (2)dom4j解析xml (3)工厂设计模式 (4)反射