antd-日历组件,前后禁止选择,只能选中间一部分的实例

antd-日历组件,前后禁止选择,只能选中间一部分:

dateDisabledDate(current) { // 需求有效期的禁止选择时间
  if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) {
   return current && (current < moment().subtract(1, 'd').add(1, "M") || current > moment(this.state.sailingtimeValue[0]).subtract(1, 'd'));
  } else {
   return current && current < moment().subtract(1, 'd').add(1, "M")
  }
 }

补充知识:关于 Ant Design 中 Input 组件的 defaultValue 属性的一个小问题

记录关于一次 Ant Design 使用时遇到的一个问题,defaultValue属性赋值,页面交互操作处理数据之后页面数据未更新(未按照预期显示)。

 class Component extends React.Component{
  constructor(props) {
   super(props);
   this.state = {
    list: [
     {name: 111},
     {name: 222},
     {name: 333},
    ]
   };
  }

  deal(index) {
   let {list} = this.state;
   list.splice(index, 1);
   this.setState({
    list
   });
  }

  render() {
   let {list} = this.state;

   return (
    <span>
    <Button type="danger" onClick={this.deal.bind(this, index)}>删除</Button>
    {
     list.map((item, index) => {
      <Row>
       <Col span={24}>
        <Item {...formItemLayout} label=" " colon={false}>
         <Input defaultValue={item.name}
           onChange={event => {this.nameChange(event, index)}} />
        </Item>
       </Col>
      </Row>
     })
    }
    </span>
   );
  }
 }

页面初始效果:

经过 deal 方法处理之后的效果:

经过多次尝试,比如:

怀疑 splice 出了问题,因为工程中 splice 有很多库的处理,经过各种尝试打印 splice 处理之后的数据结果,排除 splice 因素

尝试 react-addons-update,排除,

在 render 函数中打印结果,发现数据更新过了,费解…

在 render 中,通过 {item.name} 检测数据变化,确定 span 显示的数据已经发生变化,最终确定结果:数据已经更新,Input 显示存在问题!!!

……

经过一段时间的思考,确认数据已经更新,只是在显示的时候出了问题,返回去查 antD 的 Input 文档,发现了:

defaultValue 与 value 两个相似的属性,于是尝试着 value 替代 defaultValue 最终解决问题。

以上这篇antd-日历组件,前后禁止选择,只能选中间一部分的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决Antd 里面的select 选择框联动触发的问题

    有两个 select框,且这俩select框是关联的,触发select1,select2里面才会有值. 但是现在的问题是这样的: 触发select1,触发select2,再触发select1,此时select2里面的值变成了上次一选中的value 值,而不会被清空. 解决办法: 使用Select 里面的value属性,来进行清空 <Form style={{padding:'20px','boxSizing':'border-box'}}> <FormItem label="套

  • 基于Vue2-Calendar改进的日历组件(含中文使用说明)

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • 解决antd日期选择组件,添加value就无法点击下一年和下一月问题

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

  • antd-日历组件,前后禁止选择,只能选中间一部分的实例

    antd-日历组件,前后禁止选择,只能选中间一部分: dateDisabledDate(current) { // 需求有效期的禁止选择时间 if (this.state.sailingtimeValue != null && this.state.sailingtimeValue.length != 0) { return current && (current < moment().subtract(1, 'd').add(1, "M") ||

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

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

  • 原生JS实现日历组件的示例代码

    想要实现的效果 点击日期选择框出现日历 有个日期控制栏帮助选择日期, 包括年.月.日的选择和今天 日历格子,初次点击日期选择框时显示此刻的日期,日历格子的日期应该包括这个月的所有天数,同时如果当月的1号不是周日,还应补全从周日到1号的天数.还要在这个月最后1号的后面补全到周六. 日期控制栏和日历格子的日期还有选择框里的日期的变化要是同步的. 实现思路 为了组件的可复用性,需要用面向对象的思想. 每个日历组件都是一个日历对象,主要包括日期选择框,日期控制显示栏,还有日历格子,为了保持日期控制显示栏

  • 功能完善的小程序日历组件的实现

    小程序日历组件 日历组件,表单组件绝逼是前端开发的一个噩梦,尤其要做好一个旅游项目的日历,变态需求特别多,要在小程序中实现携程app的日历,还要兼顾性能问题. 自定义横向/纵向日历 自定义区间大小 自定义日期内容 指定节假日 支持跨月显示 难点 懒加载保证渲染性能 通过配置实现纵向日历和横向日历 阳历节日与农历节日与节气 交互,尤其是区域选择的交互 示例代码 https://github.com/webkixi/aotoo-xquery=> pages/calendar 配置说明 wxml <

  • vue自定义可选时间的日历组件

    本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下 日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延 效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

  • vue日历组件的封装方法

    本文实例为大家分享了vue日历组件的封装代码,供大家参考,具体内容如下 图示 封装的组件的代码如下 <template>   <div class="calendar">     <!-- 选择日历的弹出层 -->     <div class="model_mask" v-show="showtimemask" @click="showmask1()">     </di

  • vue实现日历组件

    基于VUE实现日历组件,供大家参考,具体内容如下 年和月份是使用输入框来切换的,没有做成选择框,️和️切换月份,红色选取是选取的日期实现思路和网上的大多数一样,首先是把月份的天数存进一个数组, monthDay:[31,'',31,30,31,30,31,31,30,31,30,31], 由于二月的天数是不确定的,所以就先设置为空 然后去求选择的月份的第一天是星期几,通过 Date.getDay()函数,这个函数有一个注意事项,就是如果是星期天,他会返回0,这需要我们自己去处理一下 图中,201

  • Flutter 日历组件简单实现

    目录 前言 安装 效果 demo 演示 业务使用 headerView 使用 配置属性 DEMO 感谢 前言 近期有个业务需求,涉及用户付费相关的计算,需要一个日历组件,组件功能如下: 仅支持从明天开始选择预定日期 仅支持可选范围内的日期 日期的选择是连续的 有个推荐日期,需要联动更新 todo: 支持不连续的日期选择 Github:tw_calendar 安装 dependencies: tw_calendar: latest_version 效果 demo 演示 业务使用 headerVie

  • javascript实现的淘宝旅行通用日历组件用法实例

    本文实例讲述了javascript实现的淘宝旅行通用日历组件用法.分享给大家供大家参考. 在线演示:http://demo.jb51.net/js/2015/trip-calendar/demo.html PS:下面的演示代码,需要用到 trip-calendar.js与trip-calendar.css文件.打包下载地址 具体如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8">

  • jQuery实现的简单日历组件定义与用法示例

    本文实例讲述了jQuery实现的简单日历组件定义与用法.分享给大家供大家参考,具体如下: 说到日历组件,网上一搜一大堆,各种插件啊.集成框架啊实在不少.但是插件有的不合需求,框架嘛依赖关系一大堆,比如jQueryUI.bootstrap等.其实现在我就是想要一个轻量级的日历组件,功能也不需要很强大,只要能兼容所有浏览器,能选择任意年份日期和星期就可以了. 好了,废话不多说,直接上代码: 好了,先引入jQuery库.(发表一下感概:angularJS的数据双向绑定着实让我对jQuery的未来担忧了

随机推荐