IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Ant design Vue的DataPicker日期选择器不可选择日期(简单) -> 正文阅读

[JavaScript知识库]Ant design Vue的DataPicker日期选择器不可选择日期(简单)

废话:【Ant版本:1.7.8,简单笔记说明下Api的disabled-data使用】

不是废话:disabled-data需要搭配show-time一起使用,重点看开始时间部分的案例代码。重点在js逻辑返回禁用的部分值。

官网的api

例如这个:

开始时间:

 <a-date-picker
              v-model="project.startTime" :disabled-date="disabledStartDate"
              :show-time="{ defaultValue: moment('00:00:00', 'HH:mm:ss') }"
            />

通过disabled-data获得传递的时间:如下为startValue

 disabledStartDate(startValue) {
      //定义一个结束时间endValue ,把后台给你的结束时间或者你自己设置的结束时间给endValue
      const endValue = this.project.endTime
      //如果没有结束时间和开始时间则执行
      if (!endValue || !startValue) {
      //这边的startValue < moment().subtract(1,'day')看文章最下面的栗子1,
      //这条指的是返回的startValue时间为当前日期的前一天,也就是今天之前的日期都不能选择
      return startValue && startValue < moment().subtract(1, 'day')
      }
      //重点在这,valueOf()处理时间格式,这边关于valueOf()的使用可以看文章最下面的栗子2
      //判断时间逻辑,其实就是判断处理后数值的大小,返回false或者true
      return endValue.valueOf() < startValue.valueOf()
    },

结束时间:(这边同开始时间)事件不一样

  <a-date-picker
              v-model="project.endTime" :disabled-date="disabledEndDate"
              :show-time="{ defaultValue: moment('23:59:59', 'HH:mm:ss') }"
              @change="onChange"
            />

通过disabled-data获得传递的时间:如下为endValue,(这边的代码等同开始时间部分)

  disabledEndDate(endValue) {
      if (!endValue || !startValue) {
        return endValue && endValue < moment().subtract(1, 'day')
      }
      return startValue.valueOf() > endValue.valueOf()
    },

开始时间和结束时间同框:

  <a-range-picker
              v-model="project.activityTime"
              :disabled="disabled"
              value-format="YYYY/MM/DD HH:mm"
              :disabled-date="disabledRangeDate"
              :show-time="{ defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('23:59:59', 'HH:mm:ss')] }"
            />

通过disabled-data获得传递的时间:如下为current,(这边的代码等同开始时间部分)

 disabledRangeDate(current) {
      const endtime = this.project.endTime
      if (endtime && current) {
        return current.valueOf() < endtime.valueOf()
      } else {
        return current && current < moment().subtract(1, 'day')
      }
    },

(这边这个只是个栗子)栗子1:

moment().subtract(10, 'days').calendar(); // 当前时间减10天,以日历时间格式返回————2021/03/28
moment().subtract(6, 'days').calendar();  // 当前时间减6天,以日历时间格式返回————上星期四10:27
moment().subtract(1, 'days').calendar();  // 前时间减1天,以日历时间格式返回————昨天10:27
moment().calendar();                      // 当前时间————今天10:27
moment().add(1, 'days').calendar();       // 当前时间加1天,以日历时间格式返回————明天10:27
moment().add(3, 'days').calendar();       // 当前时间加三天,以日历时间格式返回————下星期六10:27
moment().add(10, 'days').calendar();      // 当前时间加10天,以日历时间格式返回————2021/04/17

(这边这个只是个栗子)栗子2:

/ Date:当前时间距1970年1月1日午夜的毫秒数
var date = new Date(2013, 7, 18, 23, 11, 59, 230);
document.writeln( date.valueOf() ); // 1376838719230

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-07 11:06:01  更:2022-05-07 11:08:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 22:24:13-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码