时间戳

首页 > 解决方案 > 是否可以显示所选周的连续周数？

javascript - 是否可以显示所选周的连续周数？

问题描述

是否可以在选定的星期或工具栏中显示连续的星期数？

我尝试使用 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

标签： javascriptreactjsmaterial-ui

解决方案

这可能会对您有所帮助。

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}
 />

推荐阅读