如何使用 Material ui reactjs 禁用从今天开始的过去日期？

Posted 2023-02-22

【中文标题】如何使用 Material ui reactjs 禁用从今天开始的过去日期？

【英文标题】：How to disable past dates from today date with Material ui reactjs?

【发布时间】：2017-05-10 10:40:35

【问题描述】：

我正在使用反应材料 ui 创建日期范围选择器。我在此功能背后的逻辑是选择所需日期，如果已选择所需日期，则禁用所选日期的所有过去日期。这个react材质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;

【问题讨论】：

我建议使用类似 moment.js 的东西...或者在实例化 DatePicker 时尝试传入 minDate。

@Sathya 你能检查我的答案吗，它解决了你的问题吗？如果这不是您要询问的内容，您能否提供更多详细信息？

【参考方案1】：

这里是：

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;

【参考方案2】：

与您的问题的标题有关。

const minDate = new Date(Date.now());

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

【参考方案3】：

最好的方法是：

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