react项目 年份选择 不能跨年选择,开始和结束时间只能在某一年内

项目里的要求是前面有个年份的选择, 选中后 后面的日期选择器不能跨年选择

前面选择了年 后面日期选择器 设置自动只能选这一年当中的日期!
在这里插入图片描述
在这里插入图片描述
上代码!
结合antDesign ui库日期选择器

    //年份选择
     <FormItem
               label="年份"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 15 }}
              >
                <Select
                  width="20%"
                  showSearch
                  value={this.state.selectYear}
                  onChange={this.changeSelect.bind(this)}
                >
                  {this.state.yearList.map((item) => (
                    <Option value={item}>{item}</Option>
                  ))}
                </Select>
               </FormItem>
               
     //日期选择器
        <RangePicker
		     value={[this.state.dateStart, this.state.dateEnd]}
		      disabledDate={this.disabledDate.bind(this)}
		      onChange={this.onChangeTime.bind(this)}
		    />

js代码部分
获取一个年份选择的列表 ,从当前年往前推

 getYearList() {
    // 获取当前年
    let date = new Date() //获取当前时间
    let nowYears = date.getFullYear() //获取当前年
    let section = nowYears - 2018 //步差
    this.state.yearList = [] //存放年列表的数组
    for (var i = 0; i < section; i++) {
      this.state.yearList.push(nowYears--)
    }
    this.setState({
      selectYear: this.state.yearList[0],
    })
    let year = this.state.yearList[0]
    let dateStart = year + '-01-01' //选中那年的第一天
    let dateEnd = year + '-12-31' //选中那年的最后一天
    this.setState({
      dateStart: dateStart,
      dateEnd: dateEnd,
      start1:dateStart,
      end1:dateEnd
    })
  }
  componentWillMount(){
  this.getYearList()
  }

日期选择禁止的范围

  //其中current.getTime()就是你想要禁止选择的时间
   disabledDate(current) {
    return (
      current.getTime() > Date.now() ||
      current.getTime() < moment(this.state.start1) ||
      current.getTime() > moment(this.state.end1)
    )
  }
   /**
   * 时间选择
   */
  onChangeTime(val, dateString) {
    this.setState({
      start: dateString[0],
      end: dateString[1],
      dateStart:dateString[0],
      dateEnd:dateString[1]
    })
  }
    ```
这样就完成了 前面年份改变 后面日期选择器里默认的时间随之禁止了
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Antd的DatePicker中,可以使用`disabledDate`属性来禁用某些日期。我们可以根据选择的起始日期来动态地禁用结束日期中不合法的日期。具体实现步骤如下: 1. 在组件中定义起始日期和结束日期的状态: ```javascript import React, { useState } from 'react'; import { DatePicker } from 'antd'; function MyDatePicker() { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); // ... } ``` 2. 在结束日期的DatePicker组件中,添加`disabledDate`属性来禁用不合法的日期。在`disabledDate`函数中,我们可以通过判断当前日期是否在起始日期之后来确定该日期是否应该被禁用。 ```javascript function MyDatePicker() { // ... const disabledEndDate = (current) => { if (!startDate) { // 如果起始日期未选择,则禁用所有日期 return true; } return current && current < startDate.endOf('day'); }; return ( <div> <DatePicker value={startDate} onChange={(date) => setStartDate(date)} /> <DatePicker value={endDate} onChange={(date) => setEndDate(date)} disabledDate={disabledEndDate} /> </div> ); } ``` 在上述代码中,`disabledEndDate`函数用于禁用结束日期中不合法的日期。如果起始日期未选择,则禁用所有日期;否则,禁用所有早于起始日期的日期。`disabledEndDate`函数作为`disabledDate`属性传递给结束日期的DatePicker组件中。 通过以上实现,就可以在Antd的DatePicker中实现结束日期不能大于开始日期的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值