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

问题描述：

我使用反应材料ui创建日期范围选取器。我在这个功能背后的逻辑是选择需要的日期，如果需要的日期已被选中，从选定的日期禁用所有过去的日期。如何实现这个反应材料的用户界面？如何使用Material ui reactjs从今天的日期禁用过去的日期？

这里是我的代码，

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 ...或尝试传递的minDate当你实例化DatePicker时。 –

@Sathya你能检查我的答案吗，它能解决你的问题吗？如果这不是你问的问题，你可以提供更多的细节，你需要什么？ –

答

这就是：

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从今天的日期禁用过去的日期？

相关推荐