Get Specific Dates from Array of dates in React Datetime

Question

Does anyone know how I can pass an array of dates to react-datetime? I'm trying to implement a datepicker which can display "booked" dates from my state but currently I only managed to disable all days before the current one. So how can I pass the dates in my state to <Datetime/>, in order to disable them?

 '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;

rzvdv · Accepted Answer · 2020-04-27 20:49:22Z

1

Well first of all somethings wrong with your date format in state. Try setting up your dates using moment

this.state = {
   dates: [{
    id: 1,
    date: Datetime.moment("30 Apr 2020")
  },
  {
    id: 2,
    date: Datetime.moment("01 May 2020")
  }]
}

And your validation function should look something like this or you can extract it into a class method

  let valid = function(current, selected) {
    return !this.state.dates.some(day => current.isSame(day.date, "day"));
  };

and pass this function to Datetime

<Datetime timeFormat={false} isValidDate={valid}/>

edited Apr 27, 2020 at 20:49

answered Apr 27, 2020 at 20:31

rzvdv

512 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lucifer_Latif Over a year ago

How can we disable both - past expired days along with - future booked dates

Collectives™ on Stack Overflow

Get Specific Dates from Array of dates in React Datetime

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related