代码之家  ›  专栏  ›  技术社区  ›  core114

React ant设计日期时间选择器隐藏选择日期按钮

  •  0
  • core114  · 技术社区  · 4 年前

    我正在使用我的react项目 ant design 3 date-time picker ,我想知道如何在选择葡萄干日期时显示时间

    这里的冲突

    首先选择未来日期,然后选择上午8点或7点的时间,然后再次选择 当我第一次单击时,单击“选择日期”并选择“今天”日期 未来日期和早上7点或8点。时间显示为今天的日期,因为 我无法使用今天的日期,这是一个问题,你可以 检查

    有人知道解决方案吗?

    stack blitz here

    image description here

    此处为代码部分

       class App extends Component<AppProps, AppState> {
      constructor(props) {
        super(props);
        this.state = {
          name: 'React',
          date: new Date()
        };
      }
    //date disable
        disabledDate(current: any) {
            // Can not select days before today and today
            //return current && current < moment().endOf('day');
            return current && current < moment().startOf("day")
        }
    
        //time disable
        getDisabledHours() {
            var hours = [];
            for (let i = 0; i < moment().hour(); i++) {
                hours.push(i);
            }
            return hours;
        }
    
        //time disable
        getDisabledMinutes = (selectedHour: any) => {
            var minutes = [];
            if (selectedHour === moment().hour()) {
                for (var i = 0; i < moment().minute(); i++) {
                    minutes.push(i);
                }
            }
            return minutes;
        }
    
    
    
        //set date
        setDate(d:any){
            console.log("date object is: ", d);
            console.log("date  is: ", d.date());
            console.log("month is: ", d.month()+1);
            console.log("year is: ", d.year());
            console.log("Time :",moment(this.state.date).format("h:mm:ss A"))
            this.setState({date: d})
    
    
             const now = moment();  //get current date time
      const isFuture = d.isAfter(now); //check selected date is a future date compared to current date and time
      this.setState({date: isFuture ? d: now.toDate()}); //if it's a future date then assign the slected date else select the current date and time
    
        }
    
      render() {
        return (
          <div>
            <DatePicker
       name="Date" disabledDate={this.disabledDate}
       onChange={d => this.setState({date: d})}
       style={{width: "100%"}}
       showTime={{ disabledMinutes: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledMinutes, 
       disabledHours: moment().date() < moment(this.state.date).date() ? undefined : this.getDisabledHours}}
     placeholder="Select Date & Time"
       
      />
          </div>
        );
      }
    }
    
    0 回复  |  直到 4 年前
        1
  •  1
  •   Vivek Doshi    4 年前

    给你,你可以做这样的事情

    1. 设置 value

    2. onChange 检查日期是未来的还是比当前时间短,在此基础上可以设置日期

    // this will display the selected date
    value={moment(this.state.date)}
    
    onChange={d => {
        // checking if selected date is greater than current time
        // if then pass as it is, else pass the current time
        const date = moment() < moment(d) ? d : moment();
    
        // based on that we'll set the date
        this.setState({date})
    }}
    

    WORKING DEMO

        2
  •  0
  •   Jibin Thomas    4 年前

    您可以通过css定位元素并添加display:none;财产给它。

    .ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
        display: none
    }
    
        3
  •  0
  •   Akber Iqbal    4 年前

    下面的css似乎对我有效

    .ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn { display: none; }
    

    编辑 :index.html中的以下脚本块可以为您完成此操作。。。

    • 当您在“选择日期”和“选择时间”按钮之间切换时,DOM中会添加一个额外的div;因此,我们在每次点击时都会寻找这个额外的div(如果你愿意,你也可以为按键添加一个事件监听器),如果我们找到它,我们就知道需要显示按钮——否则如果我们得到null,我们就会隐藏按钮;
    • 我不知道如果按钮消失,你会如何切换,所以你可以改变边框的颜色(在我的stackblights中),看看这个概念是否有效

    相关代码 <script> :

    <script>
        window.addEventListener("click", checkClass);
    
    function checkClass(){
        var allBtns = document.querySelector('.ant-calendar-time .ant-calendar-time-picker');
        var relevantObj = document.querySelector('.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn');
      if (allBtns === null) {
        relevantObj.style.display = "none";
      } else {
        relevantObj.style.display = "block";
      }
    }
    
    </script>
    

    已更新 stackblitz here