从 React Datetime 中的日期数组中获取特定日期

有谁知道我如何将一组日期传递给 react-datetime?我正在尝试实现一个日期选择器,它可以显示我所在州的“预订”日期,但目前我只设法禁用当前日期之前的所有日期。那么如何将我所在州的日期传递给<Datetime/>,以禁用它们?


 'use strict';


import React       from 'react';

import {PropTypes} from 'prop-types';

import Datetime    from 'react-datetime';


class DatePicker extends React.Component {

    constructor(props) {

        super(props);


        this.state = {

            dates: [{id: 1, date: 'Apr 30 2020 09:00:00 AM'}, {id: 2, date: 'May 1 2020 12:00:00 PM'}]

        };


    }


    render() {

        const {t} = this.props;


        let yesterday = Datetime.moment().subtract(1, 'day');


        let valid = function (current) {

            return current.isAfter(yesterday);

        };


        return (

            <div className="date-picker">

                <p>{t('Date Picker')}</p>


                <Datetime timeFormat={false} isValidDate={valid(yesterday)}/>


            </div>

        );

    }

}


export default DatePicker;


湖上湖
浏览 220回答 1
1回答

跃然一笑

首先,您的状态日期格式有问题。尝试使用时刻设置您的日期this.state = {&nbsp; &nbsp;dates: [{&nbsp; &nbsp; id: 1,&nbsp; &nbsp; date: Datetime.moment("30 Apr 2020")&nbsp; },&nbsp; {&nbsp; &nbsp; id: 2,&nbsp; &nbsp; date: Datetime.moment("01 May 2020")&nbsp; }]}您的验证函数应该看起来像这样,或者您可以将其提取到类方法中&nbsp; let valid = function(current, selected) {&nbsp; &nbsp; return !this.state.dates.some(day => current.isSame(day.date, "day"));&nbsp; };并将此函数传递给 Datetime<Datetime timeFormat={false} isValidDate={valid}/>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript