gpt4 book ai didi

javascript - 需要为日历创建自定义导航标题

转载 作者:行者123 更新时间:2023-11-29 22:54:06 24 4
gpt4 key购买 nike

我有一个 Antd 日历,我正在将其用作更大的 React 项目的一部分。该组件将从 API 响应加载数据,并将一组日期和时间映射到日历上的日期,以便选择日期/时间,例如07/12/2019PM

开箱即用,用于选择月份和年份的默认标题样式看起来像 this .

我正在尝试更改它们以包含一个自定义 header ,该 header 仅列出月份名称和年份(例如:2019 年 7 月)以及用于在月份之间导航的左右 V 形。

我已经包括了人字形,但是当涉及到实现导航功能以及如何呈现当前月份和年份的名称时,我完全不知所措。

我在这里包含了一个 CodeSandbox 来显示我当前的进度

Edit stoic-mcclintock-0dp6p

我的日历组件

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;

最佳答案

尝试使用 DatePicker使用 showTime 功能,检查 example , 按选择时间

enter image description here

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

Edit 3vyz0z018p

此外,如果您使用 open 属性,您将获得您尝试实现的组件:

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

关于javascript - 需要为日历创建自定义导航标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56939510/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com