2016-12-25 3 views
3

Я создаю выбор диапазона дат с материалом реакции ui. Моя логика этой функции заключается в том, чтобы выбрать нужную дату и, если выбрана требуемая дата, отключить все прошедшие даты из выбранных дат. Как реализовать этот реагирующий материал ui?Как отключить прошлые даты с сегодняшнего дня с помощью материала 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; 
+0

я рекомендовал бы использовать что-то вроде moment.js ... или попробуйте передать в MinDate когда вы создаете экземпляр DatePicker. –

+0

@ Сатья, не могли бы вы проверить мой ответ, решает ли ваш вопрос? Если это не то, о чем вы спрашиваете, можете ли вы дать более подробную информацию о том, что вам нужно? –

ответ

3

Здесь:

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;

 Смежные вопросы

  • Нет связанных вопросов^_^