antd日期选择器禁止选择当天之前的时间操作

2024-10-18 05:33:49

使用disabledDate属性（不可选择的日期）

<a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/>

在js中定义函数并返回

 //限制当天之前的日期不可选
  disabledDate(current) {
   return current && current <moment().subtract(1, "days"); //当天之前的不可选，不包括当天
  //return current && current < moment().endOf(‘day');当天之前的不可选，包括当天
  }

补充知识：antd DatePicker RangePicker限制时间范围，其中结束时间限制时分秒不可选

需求：选择时间区间，且只能选择当前时刻之前的时间，且时分秒也要做限制。（比如现在是2019-11-13 10:29:31，那就只能选择此刻以前的，尚未发生的时间不可选。）

期望图如下：

实现：

1. 首先在页面引入时间控件与moment插件

import { DatePicker } from 'antd';
import moment from 'moment';
const { RangePicker } = DatePicker;

2. 在render中使用时间控件。

限制日期不可选是disabledDate，限制时间不可选是disabledTime（我是与form表单一起使用，可根据情况自行选择）

<FormItem label="回溯时间区间" {...formItemLayout}>
    {getFieldDecorator("time",{
      rules: [{
       required: true,
       message: "请选择回溯区间"
      }],
     })(
     <RangePicker
      disabledDate={this.disabledDate} // 限制日期不可选
      disabledTime={this.disabledDateTime} // 限制时间不可选
      format="YYYY-MM-DD HH:mm:ss" // 时间格式
      placeholder={['开始时间', '结束时间']}
      showTime // 增加时间选择按钮
     />
     )}
    </FormItem>

3. 用函数做具体的逻辑判断。

disabledDate=(current)=>{
  return current && current >= moment().endOf('day'); // 选择时间要大于等于当前天。若今天不能被选择，去掉等号即可。
 }
 range = (start, end) => {
  const result = [];
  for (let i = start; i <= end; i++) {
   result.push(i);
  }
  return result;
 };
 disabledDateTime = (dates,partial) => {
  let hours = moment().hours();//0~23
  let minutes = moment().minutes();//0~59
  let seconds = moment().seconds();//0~59
  //当日只能选择当前时间之后的时间点
  if (dates&&moment(dates[1]).date() === moment().date()&&partial=='end') {
   return {
    disabledHours: () => this.range(hours+1,23),
    disabledMinutes: () => this.range(minutes+1,59),
    disabledSeconds: () => this.range(seconds+1,59),
   };
  }
 }

以上这篇antd日期选择器禁止选择当天之前的时间操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

antd vue table跨行合并单元格,并且自定义内容实例

ant-design-vue版本:~1.3.8 需求:表格实现跨行合并,并且在合并完的单元格中显示图片效果图: 源码: export default { data() { return { pic95: require('@/assets/produit/95.png'), pic99: require('@/assets/produit/99.png'), varTable: { cloumns: [ { title: '置信度', dataIndex: 'confidence ', cla
解决antd Form 表单校验方法无响应的问题

antd 的表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动
react antd表格中渲染一张或多张图片的实例

使用antd table中显示一张图片,代码如下: const columns = [ { title: "姓名", dataIndex: "name", width: 100 , // table列定宽可不设 fixed: "left" // 固定列的位置 }, { title: "联系电话", width: 150, dataIndex: "phone" }, { title:"显示一张图片
解决antd日期选择组件,添加value就无法点击下一年和下一月问题

原因: 表单监听了关闭事件,执行了setState,若是给closeFloatingLayer增加延时就可看出来antd数据的变化. 解决方法: DatePicker外面套一层div,然后阻止冒泡补充知识:antd 的 RangePicker 中日期选择近三月今天遇到一个问题,日期插件中只能选择近三个月.代码如下: 属性中 disabledDate 就是日期禁止选择. 1.当前天之前 2.当前天之后 3.近三月 4.后三月以上这篇解决antd日期选择组件,添加value就无法点击下一年和下
在antd Table中插入可编辑的单元格实例

最近遇到一个需求,要求表格中某一属性是可以手动改变的.看了antd Table 的官方组件,发现不太灵活,所以自己动手写了一下. 实现的思路大同小异,在columns中插入Input,很简单的,直接render中返回就好,只是中间遇到小插曲,改变一个input的值所有的都跟着改变,原来是都定义成了同一个变量,后来家里一个动态的后缀.具体代码见贴图补充知识:React+Ant Design实现可编辑单元格.添加行并利用form获取新增数据实现如下图所示需求: 实现功能说明: 点击添加按钮,在表
antd日期选择器禁止选择当天之前的时间操作

使用disabledDate属性(不可选择的日期) <a-date-picker @change="dateChange" :disabledDate="disabledDate" v-decorator="['endDate']"/> 在js中定义函数并返回 //限制当天之前的日期不可选 disabledDate(current) { return current && current <moment().su
易语言设置日期框禁止选择以前日期的代码

禁止日期框选择小于当前日期的代码 .版本 2 .程序集窗口程序集1 .子程序 _日期框_选择日期被改变 .如果真 (日期框.今天 < 取现行时间 ()) 信息框 ("不可选择以前的日期!", 16, "提示", ) 日期框.今天＝取现行时间 () 返回 () .如果真结束运行结果: 总结以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对我们的支持.如果你想了解更多相关内容请查看下面相关链接
ElementUI日期选择器时间选择范围限制的实现

目录单个输入框的情景1: 设置选择今天以及今天之后的日期情景2: 设置选择今天以及今天以前的日期情景3: 设置选择今天之后的日期(不能选择当天时间) 两个输入框情景1: 限制结束日期不能大于开始日期 ElementUI是饿了么推出的一套基于vue2.x的一个ui框架.官方文档也很详细,这里做一个element-ui日期插件的补充. 官方文档中使用picker-options属性来限制可选择的日期,这里举例子稍做补充. 单个输入框的组件代码: <el-date-picker v-mod
jQuery UI 实例讲解 - 日期选择器(Datepicker)

默认功能日期选择器(Datepicker)绑定到一个标准的表单 input 字段上.把焦点移到 input 上(点击或者使用 tab 键),在一个小的覆盖层上打开一个交互日历.选择一个日期,点击页面上的任意地方(输入框即失去焦点),或者点击 Esc 键来关闭.如果选择了一个日期,则反馈显示为 input 的值. <!doctype html> <html lang="en"> <head> <meta charset="utf-8&
ElementUI时间选择器限制选择范围disabledData的使用

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决.HTML:给选择器加上:picker-options属性 //开始时间 <el-date-picker v-model="startDate"></el-date-picker> //截止时间 <el-date-picker v-model="endDate" :picker-options="endDateOpt
iOS实现自定义日期选择器示例

iOS自定义日期选择器,下面只是说明一下怎么用,具体实现请在最后下载代码看看: 效果如下: .h文件解析选择日期选择器样式 typedef enum{ DateStyleShowYearMonthDayHourMinute = 0, DateStyleShowMonthDayHourMinute, DateStyleShowYearMonthDay, DateStyleShowMonthDay, DateStyleShowHourMinute }XHDateStyle; //日期选择器样式 @
js实现精确到秒的日期选择器完整实例

本文实例讲述了js实现精确到秒的日期选择器.分享给大家供大家参考,具体如下: <script> // 主调用函数是 setday(this,[object])和setday(this),[object]是控件输出的控件名,举两个例子: // 一.<input name=txt><input type=button value=setday onclick="setday(this,document.all.txt)"> // 二.<input
微信小程序的日期选择器的实例详解

微信小程序的日期选择器的实例详解前言: 关于微信小程序中的日期选择器大家用过都会发现有个很大的问题,就是在2月的时候会有31天,没有进行对闰年的判断等各种情况.看了官方文档提供的源码后进行了一些修改,测试修复了上面所说的bug! 下面源码:  const date = new Date();//获取系统日期 const years = [] const months = [] const days = [] const bigMonth = [1,3,5,7,8,10,
Bootstrap datepicker日期选择器插件使用详解

bootstrap是与jquery.js文件一起结合起来一起用的,缺少任何一个文件都不可以. datepicker插件一般用于在文本框中选择日期,通过在表中选择日期,从而将日期显示在文本框中.因为datepicker.js默认是英文的,如果需要显示中文日期,则需要引入该插件的中文包. 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv=&

antd日期选择器禁止选择当天之前的时间操作

相关推荐

随机推荐