Необходимо создать пользовательский заголовок навигации для календаря - PullRequest
Новая
       30

Необходимо создать пользовательский заголовок навигации для календаря

2 голосов
/ 08 июля 2019

У меня есть календарь Antd, который я использую как часть более крупного проекта React.Этот компонент будет загружать данные из ответа API и отображать набор дат и времени AM, PM, ANY, каждый со своим уникальным идентификатором, на даты в календаре для выбора даты / времени, например 07/12/2019 и PM* 1004.*

Из коробки стили заголовка по умолчанию для выбора месяца и года выглядят так: this .

Я пытаюсь изменить их, чтобы включить настраиваемый заголовок, который простоперечисляет название месяца и год (пример: July 2019) и левый и правый шеврон для навигации между месяцами.

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

Я добавил сюда CodeSandbox, чтобы показать мой текущий прогресс

Edit stoic-mcclintock-0dp6p

My Calendar Component

import React from "react";
import { Calendar, Select, Radio, Col, Row } from "antd";
import { FaChevronRight, FaChevronLeft } from "react-icons/fa";
import styled from "styled-components";

const { Group, Button } = Radio;

function onPanelChange(value, mode) {
  console.log(value, mode);
}

const StylingCalendar = props => (
  <div style={{ width: 300, border: "1px solid #d9d9d9", borderRadius: 4 }}>
    <Calendar
      fullscreen={false}
      headerRender={({ value, type, onChange, onTypeChange }) => {
        const start = 0;
        const end = 12;
        const monthOptions = [];

        const current = value.clone();
        const localeData = value.localeData();
        const months = [];
        for (let i = 0; i < 12; i++) {
          current.month(i);
          months.push(localeData.monthsShort(current));
        }

        for (let index = start; index < end; index++) {
          monthOptions.push(
            <Select.Option className="month-item" key={`${index}`}>
              {months[index]}
            </Select.Option>
          );
        }
        const month = value.month();

        const year = value.year();
        const options = [];
        for (let i = year - 10; i < year + 10; i += 1) {
          options.push(
            <Select.Option key={i} value={i} className="year-item">
              {i}
            </Select.Option>
          );
        }
        return (
          <div style={{ padding: 10 }}>
            <div style={{ marginBottom: "10px" }}>{monthOptions.name}</div>
            <Row type="flex" justify="space-between">
              {/* <Col>
                <Group
                  size="small"
                  onChange={e => onTypeChange(e.target.value)}
                  value={type}
                >
                  <Button value="month">Month</Button>
                  <Button value="year">Year</Button>
                </Group>
              </Col> */}
              {/* <Col>
                <Select
                  size="small"
                  dropdownMatchSelectWidth={false}
                  className="my-year-select"
                  onChange={newYear => {
                    const now = value.clone().year(newYear);
                    onChange(now);
                  }}
                  value={String(year)}
                >
                  {options}
                </Select>
              </Col> */}
              <Col span={8}>
                <LeftArrow onClick={null} />
              </Col>
              <Col span={8}>
                {/* <FaChevronLeft /> */}
                <Select
                  size="small"
                  dropdownMatchSelectWidth={false}
                  value={String(month)}
                  onChange={selectedMonth => {
                    const newValue = value.clone();
                    newValue.month(parseInt(selectedMonth, 10));
                    onChange(newValue);
                  }}
                >
                  {monthOptions}
                </Select>
              </Col>
              <Col span={8}>
                <RightArrow onClick={null} />
              </Col>
            </Row>
          </div>
        );
      }}
      onPanelChange={onPanelChange}
    />
  </div>
);

const RightArrow = styled(FaChevronRight)`
  cursor: pointer;
`;

const LeftArrow = styled(FaChevronLeft)`
  cursor: pointer;
`;

export default StylingCalendar;

1 Ответ

1 голос
/ 08 июля 2019

Попробуйте использовать DatePicker с showTime funcionallity, проверьте пример , нажав select time.

enter image description here

<div>
  <DatePicker
    showTime
    placeholder="Select Time"
    onChange={onChange}
    onOk={onOk}
  />
</div>

Edit 3vyz0z018p

Более того, если вы используете свойство open, вы получите именно тот компонент, который вы пытаетесь реализовать: 

<DatePicker open showTime placeholder="Select Time" />
...