首页 > 其他分享 >ant-design date-picker 可以选择当天,时间不能选择过去的小时

ant-design date-picker 可以选择当天,时间不能选择过去的小时

时间:2024-10-11 13:33:16浏览次数:8  
标签:picker current HH ant 日期 moment design 选择

不得不说moment真厉害啊,是我之前低估他了

我这里是可以选择到具体的分钟的

<a-date-picker
                v-model="chooseDate"
                placeholder="年-月-日"
                :inputReadOnly="true"
                :show-time="showTime"
                format="YYYY-MM-DD HH:mm"
                value-format="YYYYMMDD HH:mm"
                autocomplete="off"
                :disabledDate="disabledDate"
                style="width: 100%"
            />


import moment from "moment"; //引入一下moment   //在数据里面定义一下 data() {         return {             moment,             chooseDate:'',// 日期              lastDate:'2030-12-12',// 截至日期 (没有截止日期可以不要哈)             showTime: {                 format: "HH:mm",                 defaultValue: moment(moment().add(1, 'hour').format('HH'), "HH:mm"),//默认时间往后加一个小时             },                       };     }, 在methods里面新增disabledDate 方法, //  不可选日期   不过不加30s的话,可能当天选不了,因为时间截止到分钟,影响不大太 disabledDate(current) {              return  current  && current.isBefore(moment().subtract(30, 'second')) ||  current > moment(this.lastDate).endOf("day");         },

 

标签:picker,current,HH,ant,日期,moment,design,选择
From: https://www.cnblogs.com/xbxxf/p/18458175

相关文章

  • Synchronized锁和Reentrantlock的区别和联系以及锁升级
    二者的底层实现:Synchronized就是基于monitor对象主要的为Owner获得这个锁资源的线程唯一标识符(线程ID)Count线程获得几次锁(可重入锁的实现)ContentionList等待队列(线程加锁失败的情况下)Reentrantlock是基于AQS这个就是表示是哪一个线程获得这个锁资源    ......
  • 2024-10-11 自定义渲染之arco-design-vue table的columns的title ==》使用DOM插入子元
    嗯...不知我没找到arco对应tabletitle的自定义渲染的正确方式 但我已经找了1个小时了,既然没找到就自己插入吧业务场景如下: 给表头插入一个必填的符号*,就这么简单的需求。代码如下:constelements:any=document.querySelectorAll('.arco-table-th-title');elements.f......
  • umi3使用ant design landing
    创建umi3项目使用node161.创建一个空文件夹mkdirmyapp&&cdmyapp2.使用@umijs/umi-app创建项目npx@umijs/create-umi-app3.安装依赖npmi4.降低antd版本[email protected].将从landing上下载的Home文件包和pages放至src文件包里......
  • ant design react 表单设置初始值及更新表单数据
    importReactfrom'react';import'./index.css';import{Button,Form,Input}from'antd';constApp=()=>{const[form]=Form.useForm();constupdateValue=()=>{//假设我们要更新的字段是'username'......
  • web端ant-design-vue Upload 手动实现文件上传使用小节
     web端ant-design-vueUpload手动实现文件上传使用小节。最近在项目开发中用到了手动实现文件上传的组件,之前都是自动上传把返回的文件信息保存到服务器。手动上传相对复杂一下,我把遇到的一些问题整理记录一下,有需要的朋友可以避免走弯路!1、文件上传需要用formdata格式,需......
  • web端ant-design-vue Modal.info组件自定义icon和title使用小节
     web端ant-design-vueModal.info组件自定义icon和title整理小节,最近在项目中用到了自定义icon和title的功能,经过测试发现,如果自定义icontitle会自动换行,尝试直接修改样式和穿透方式都没有效果,最后采取了一个巧妙的方式,将icon和title放在一个自定义组件内,完美解决!代码如下......
  • antv X6 全局禁用节点和边拖动,画布可以拖动
    项目有个需求,通过接口获取用户权限,限制用户拖动节点和边查阅文档和百度发现Graph可以配置interacting来限制节点和边的交互但是用户的权限通过接口获取,如何动态配置interacting是否为false1、节点的node.prop可以进行通信,但是需要遍历画布的所有节点,参考https://codesa......
  • ant-design 使用Modal组件报错问题记录
    打开modal组件会提示如下报错信息高版本chrome浏览器会出现这个问题 原因是:不能在获得焦点的元素或其祖先上使用aria-hidden解决方案:全局添加如下CSS,暂时将Modal中该属性的元素隐藏掉.ant-modaldiv[aria-hidden="true"]{display:none!important;} ......
  • antd中的多选框defaultValue失效问题
    antd中的Checkbox.Group属性中的 defaultValue为数组当改变某个状态需要改变这个数组发现失效解决办法:            Checkbox.Group添加key值为defaultValue指定的数组 当key值发生变化组件会重新渲染,从而使更新后的defaultValue属性生效。原因:defaultVa......
  • HarmonyOS开发——编译报错“The reason and usedScene attributes are mandatory for
    问题现象:DevEcoStudio编译失败,提示“ThereasonandusedSceneattributesaremandatoryforuser_grantpermissions”。问题原因:从DevEcoStudioNEXTDeveloperPreview2版本开始新增规则:APP包中,所有entry和featurehap的module下的requestPermissions权限清单必须指定(......