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

Question

возможно ли отображать номер недели в строке с выбранной неделей или на панели инструментов?

Я пытался использовать ToolbarComponent, но он переопределяет весь заголовок. Но я хочу сделать это так же, как добавить информацию о выбранной неделе

class CustomElements extends PureComponent {
  renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => {
    const { classes } = this.props;

    let dateClone = date.clone();
    let selectedDateClone = selectedDate.clone();

    const start = selectedDateClone.startOf("week").toDate();
    const end = selectedDateClone.endOf("week").toDate();

    const dayIsBetween = dateClone.isBetween(start, end, null, []);
    const isFirstDay = dateClone.isSame(start, "day");
    const isLastDay = dateClone.isSame(end, "day");

    const wrapperClassName = clsx({
      [classes.highlight]: dayIsBetween,
      [classes.firstHighlight]: isFirstDay,
      [classes.endHighlight]: isLastDay
    });

    const dayClassName = clsx(classes.day, {
      [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
      [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth && dayIsBetween
    });

    return (
      <div className={wrapperClassName}>
        <IconButton className={dayClassName}>
          <span>{dateClone.format("DD")} </span>
        </IconButton>
      </div>
    );
  };

  render() {
    const { selectedDate } = this.state;

    return (
      <DatePicker
        label="Week picker"
        value={selectedDate}
        onChange={this.handleWeekChange}
        renderDay={this.renderWrappedWeekDay}
        labelFunc={this.formatWeekSelectLabel}
      />
    );
  }
}

пример https://codesandbox.io/s/week-picker-36ig1

Answer 1

Это может вам помочь.

Codesandbox.io

Создайте новый компонент 'MyToolbar. js' с этим содержанием:

import React from "react";

import { createStyles } from "@material-ui/styles";
import { withStyles, Toolbar, Button } from "@material-ui/core";
import moment from "moment";

export const styles = theme =>
  createStyles({
    toolbar: {
      display: "flex",
      flexDirection: "column",
      alignItems: "flex-start",
      justifyContent: "center",
      height: 100,
      backgroundColor:
        theme.palette.type === "light"
          ? theme.palette.primary.main
          : theme.palette.background.default
    },
    label: {
      color:
        theme.palette.type === "light"
          ? theme.palette.primary.contrastText
          : theme.palette.background.default
    }
  });

const MyToolbar = ({ setOpenView, date }) => {
  const today = moment(date);

  var weeknumber = today.week();
  var year = today.year();
  var month = today.format("MMM");

  const fromDate = today.startOf("week").date();
  const toDate = today.endOf("week").date();

  return (
    <Toolbar className="MuiToolbar-root MuiToolbar-regular MuiPickersToolbar-toolbar MuiPickersDatePickerRoot-toolbar MuiToolbar-gutters">
      <Button onClick={e => setOpenView("year")}>
        <span className="MuiPickersToolbar-label">
          <h6 className="MuiTypography-root MuiPickersToolbarText-toolbarTxt MuiTypography-subtitle1">
            {year} Week {weeknumber}
          </h6>
        </span>
        <span className="MuiTouchRipple-root" />
      </Button>
      <Button onClick={e => setOpenView("date")}>
        <span className="MuiPickersToolbar-label">
          <h4 className="MuiTypography-root MuiPickersToolbarText-toolbarTxt MuiPickersToolbarText-toolbarBtnSelected MuiTypography-h4 MuiTypography-alignCenter">
            {month} {fromDate} to {toDate}
          </h4>
        </span>
        <span className="MuiTouchRipple-root" />
      </Button>
    </Toolbar>
  );
};

export default withStyles(styles, { name: "MuiPickersToolbar" })(MyToolbar);

Импортируйте в свой WeekPicker. js

import MyToolbar from "./MyToolbar";

И добавьте его в свой DatePicker

<DatePicker
    label="Week picker"
    value={selectedDate}
    onChange={this.handleWeekChange}
    renderDay={this.renderWrappedWeekDay}
    labelFunc={this.formatWeekSelectLabel}
    ToolbarComponent={MyToolbar}
 />

Answer 2

Я обнаружил похожую проблему https://github.com/mui-org/material-ui-pickers/issues/521

и отображал номер недели путем переопределения renderDay

class CustomElements extends PureComponent {
  ...

  renderWrappedWeekDay = (date, selectedDate, dayInCurrentMonth) => {
    const { classes } = this.props;

    let dateClone = date.clone();
    let selectedDateClone = selectedDate.clone();

    const start = selectedDateClone.startOf("week").toDate();
    const end = selectedDateClone.endOf("week").toDate();

    const dayIsBetween = dateClone.isBetween(start, end, null, []);
    const isFirstDay = dateClone.isSame(start, "day");
    const isLastDay = dateClone.isSame(end, "day");

    const wrapperClassName = clsx({
      [classes.highlight]: dayIsBetween,
      [classes.firstHighlight]: isFirstDay,
      [classes.endHighlight]: isLastDay
    });

    const dayClassName = clsx(classes.day, {
      [classes.nonCurrentMonthDay]: !dayInCurrentMonth,
      [classes.highlightNonCurrentMonthDay]: !dayInCurrentMonth && dayIsBetween
    });

    return (
      <div className={classes.dayWrapper}>
        {dateClone.isoWeekday() === 1 && (
          <div className={classes.weekNumber}>{dateClone.isoWeek()}</div>
        )}
        <div className={wrapperClassName}>
          <IconButton className={dayClassName}>
            <span>{dateClone.format("DD")} </span>
          </IconButton>
        </div>
      </div>
    );
  };

  render() {
    const { selectedDate } = this.state;

    return (
      <DatePicker
        label="Week picker"
        value={selectedDate}
        onChange={this.handleWeekChange}
        renderDay={this.renderWrappedWeekDay}
        labelFunc={this.formatWeekSelectLabel}
      />
    );
  }
}