React Datetime Component - Получить специфи c даты из массива дат - PullRequest
Новая
       27

React Datetime Component - Получить специфи c даты из массива дат

0 голосов
/ 27 апреля 2020

Я пытаюсь реализовать логи c для средства выбора даты с React Datetime, которое может считывать даты, которые я определил в моем состоянии, и затем устанавливает определенные стили для <td> в устройстве выбора даты.

Есть пара случаев, которые я хочу охватить:

  • Отключить выбор дней до сегодняшней даты (поскольку их больше нельзя бронировать) <- это уже реализовано </strong>

  • Установить CSS класс / стиль для забронированных утра (если время установлено как 9:00)

  • Установить CSS класс / стиль для забронированных дней (если время установлено как 12:00)
  • Установить CSS класс / стиль для забронированного полного дня

В CSS Я хотел бы отобразить наполовину забронированное утро / день в виде " половина квадрата в зависимости от времени, и если день полностью забронирован, я хочу показать его как полный квадрат, но я не уверен, как я могу «подать» свой массив дат компоненту и как установить эти классы. здесь есть некоторый опыт работы с React datetime / знать решение это может сработать?

Я пытался подготовить это здесь: https://jsfiddle.net/s9ozdw26/

 'use strict';

import React       from 'react';
import {PropTypes} from 'prop-types';
import Datetime    from 'react-datetime';

import translate from './../translate';

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>
        );
    }
}

DatePicker.propTypes = {
    t: PropTypes.func.isRequired
};

export default translate(DatePicker);
...