首页 > 其他分享 >a-date-picker设置禁用以前的时间(含时分秒)

a-date-picker设置禁用以前的时间(含时分秒)

时间:2023-12-25 16:33:25浏览次数:34  
标签:picker return current Date moment date new 时分秒

 

<a-date-picker 
  v-model="selectTime" 
  show-time 
  format="YYYY/MM/DD HH:mm:ss" 
  valueFormat="YYYY-MM-DD HH:mm:ss" 
  :disabled-date="disabledDate"
  :disabled-time="disabledTime"
  placeholder="请选择时间"  />

 

import moment from 'moment';
// 设置禁用日期(年月日) disabledDate(current) { // 禁用今天之前的日期 return moment(current).add(1, 'day') < new Date() },

// 设置禁用的时分秒 disabledTime(current) { return { disabledHours: () => this.getDisabledHours(current || moment(new Date())), disabledMinutes: () => this.getDisabledMinutes(current || moment(new Date())), disabledSeconds: () => this.getDisabledSeconds(current || moment(new Date())), }; }, getDisabledHours(date) { const hours = []; for (let i = 0; i < 24; i++) { if (moment().isAfter(date.clone().hour(i))) { hours.push(i); } } return hours; }, getDisabledMinutes(date) { const minutes = []; for (let i = 0; i < 60; i++) { if (moment().isAfter(date.clone().minute(i))) { minutes.push(i); } } return minutes; }, getDisabledSeconds(date) { const seconds = []; for (let i = 0; i < 60; i++) { if (moment().isAfter(date.clone().second(i))) { seconds.push(i); } } return seconds; }

 

标签:picker,return,current,Date,moment,date,new,时分秒
From: https://www.cnblogs.com/djjlovedjj/p/17926359.html

相关文章

  • Linuk离线安装安装ntp服务和ntpdate
    手动同步ntpdate设置时区:查看是否存在:timedatectllist-timezones|grepAsia/Sahnghai设置:timedatectlset-timezones|grepAsia/Sahnghai查看时区date-R+0800ntpdateip同步时区相关安装包:https://pan.baidu.com/s/1oiXWqfrZ7xQCxCe7fDX0CQ提取码:SMZH还可以在下载:http......
  • C++ Qt开发:DateTime日期时间组件
    Qt是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍QDateTime日期与时间组件的常用方法及灵活运用。在Qt中,日期和时间的处理通常使用QDateTime类。QD......
  • 无涯教程-PostgreSQL - 更新数据(Update)
    PostgreSQLUPDATE查询用于修改表中的现有记录,您可以将WHERE子句与UPDATE查询一起使用来更新选定的行,否则,将更新所有行。使用WHERE子句的UPDATE查询的基本语法如下-UPDATEtable_nameSETcolumn1=value1,column2=value2....,columnN=valueNWHERE[condition];您可以使用......
  • of type [class java.lang.String] to [class java.util.Date]
    报错:javax.el.ELException:Cannotconvert[2023-11-1422:35:34]oftype[classjava.lang.String]to[classjava.util.Date]  问题分析:相应数据的类型不正确bean层写的是: privateStringcreateDate; jsp写的是:<fmt:formatDatevalue="${file.createDate}"patte......
  • SAP ABAP 更新函数(Update Function Module)执行出错的原因分析试读版
    本教程前一篇文章,我们已经介绍了SAPABAPUpdateWokeProcess和UpdateFunctionModule的基本概念。129.SAPABAPUpdateProcess(更新进程)的概念和设计动机解析回到笔者知识星球朋友的提问:我们通过一个实战例子来消化前一篇文章学到的理论知识。本教程之前介绍了SA......
  • 关于debezium同步mysql字段类型的datetime、date、time、timestamp的格式转换说明
    1.情景展示使用debezium的插件:debezium-connector-oracle(io.debezium.connector.mysql.MySqlConnector),自动读取mysql日志binlog相关表的数据变更记录,然后将其发布到kafkatopic当中。现在遇到的问题是:在mysql当中,表示日期类型的数据类型有:datetime、date和timestamp;表示时间......
  • element-plus的type类型为daterange的时候限制时间选择
    对于ElementPlus的日期时间范围选择组件(el-date-picker的type设置为"daterange"),你可以使用:picker-options属性来设置选项,通过disabledDate函数来禁止选择当前时间之前的日期。下面是一个el-date-picker(type为"daterange")的示例,它禁止选择今天之前的日期:<el-date-......
  • vue3 + vant4 :form表单中,搭配 Popup 和 Field 实现vant-picker组件,设置默认值及默认选
    环境:vue3,vant4背景:Picker作为用于辅助表单填写,搭配Popup和Field。页面需要给picker设置默认值,city为温州,但是在popup弹出时,picker没有选中温州这个选项,还时停留在杭州。解决方案:看了很多解决方案,设置default-indexset,ColumnIndex。都尝试了,还是不行。而且这些方法,其实在v......
  • 12.21(update)
    续集细胞,不仅我们的体活因为整理考场顺便被停了(原因是因为他们明天放假,感情啥坏事都让我们沾上了呗),而且大黄也大概失败了大黄是谁?![o_231221100612_批注2023-12-21180539.png(781×241)(cnblogs.com)](https://images.cnblogs.com/cnblogs_com/blogs/807966/galleries/23579......
  • updatetext关键字应用简介说明
    updatetext功能说明:updatetext的功能为:更新当前的text,ntext,image字段,当我们可以使用updatetext更新列中的部分数据updatetext语法简介: -----参数说明-------------------------BULK:是否采用二进制数据流,非采用二进制数据流,此参数无需输入table_name.dest_column_......