如何使用Material ui reactjs禁用今天起的过去日期? [英] How to disable past dates from today date with Material ui reactjs?

问题描述

我正在使用反应物料ui创建日期范围选择器.该功能背后的逻辑是选择所需日期，如果已选择了所需日期，请禁用所选日期中的所有过去日期.如何实现此反应物料ui?

I'm creating date range picker with react material ui. My logic behind this functionality is to select required date and if required date has been selected, disable all past dates from selected dates. How to implement this react material ui?

这是我的代码，

import React from 'react';
import {render} from 'react-dom';
import DatePicker from 'material-ui/DatePicker';

function disablePrevDates(date) {
  return date.getDay() === 0;
}

class App extends React.Component {
    render() {
        return (
            <div>
                <DatePicker hintText="Check-in" shouldDisableDate={disablePrevDates} />
            </div>
        )
    }
}

export default App;

推荐答案

在这里是

import React from 'react';
import DatePicker from 'material-ui/DatePicker';

function disablePrevDates(startDate) {
  const startSeconds = Date.parse(startDate);
  return (date) => {
    return Date.parse(date) < startSeconds;
  }
}

class App extends React.Component {
    
    render() {
        const startDate = new Date();
//      or:
//      const startDate = new Date('December 20, 2016');
//      const startDate = this.state.firstDate;
      
        return (
            <div>
                <DatePicker 
                  hintText="Check-in" 
                  shouldDisableDate={disablePrevDates(startDate)}
                />
            </div>
        )
    }
}

export default App;

这篇关于如何使用Material ui reactjs禁用今天起的过去日期?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！