Можно ли запретить DatePicker пользовательского интерфейса для материала выбрать день в представлении календаря? - PullRequest
Новая
       24

Можно ли запретить DatePicker пользовательского интерфейса для материала выбрать день в представлении календаря?

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

Я знаю, что вы можете установить значение null, чтобы очистить указатель даты, но в представлении календаря (в моем случае это вариант: "stati c") по-прежнему устанавливается дата на сегодняшний день.

This: 

<DatePicker value={null} variant="static"/>

.. показывает выбранный текущий день, но я хочу, чтобы был выбран только текущий месяц, а не текущий день.

Это фактически имитирует c поведение средства выбора даты Google, что я и пытаюсь сделать. ([искать что-то в Google]> Инструменты> В любое время ..> Пользовательский диапазон ..)

1 Ответ

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

Наконец, я получил что-то, делающее примерно то, что хотел, обернув DatePicker и переопределив метод renderDay. Вероятно, есть гораздо лучшее решение (я все еще только изучаю веб-разработку), и мне очень интересно, если кто-нибудь знает одно, но тем не менее вот мое хакерское решение: 

import clsx from 'clsx';
import format from 'date-fns/format';
import { isSameDay, isBefore, isAfter } from 'date-fns';
import React from 'react';
import { DatePicker as MuiDatePicker } from '@material-ui/pickers';
import { createStyles } from '@material-ui/core/styles';
import { IconButton, withStyles } from '@material-ui/core';

const styles = createStyles((theme) => ({
  dayWrapper: {
    position: 'relative',
  },
  day: {
    width: 36,
    height: 36,
    fontSize: theme.typography.caption.fontSize,
    margin: '0 2px',
    color: 'inherit',
  },
  nonCurrentMonthDay: {
    color: theme.palette.text.disabled,
  },
  highlightNonCurrentMonthDay: {
    color: '#676767',
  },
  highlight: {
    background: theme.palette.primary.main,
    color: theme.palette.common.white,
    borderRadius: '50%',
  },
}));

const DatePicker = (props) => {
  const { minDate, maxDate, value, classes } = props;

  const renderDay = (date, selectedDate, dayInCurrentMonth) => {
    const isSame = isSameDay(date, selectedDate);
    const beforeMin = isBefore(date, new Date(minDate));
    const afterMax = isAfter(date, new Date(maxDate));
    const emptyValue = value === null || value === '';

    const wrapperClassName = clsx({
      [classes.highlight]: isSame && !emptyValue,
    });

    const dayClassName = clsx(classes.day, {
      [classes.nonCurrentMonthDay]: !dayInCurrentMonth || beforeMin || afterMax,
      [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth,
    });
    return (
      <div className={wrapperClassName}>
        <IconButton className={dayClassName}>
          <span> {format(date, 'd')} </span>
        </IconButton>
      </div>
    );
  };

  return <MuiDatePicker renderDay={renderDay} {...props} />;
};

export default withStyles(styles)(DatePicker);
...