ant design mobile中日历组件修改

Question

问题描述

antDesignMobile 的日历组件怎么自定义快捷日期按键，最好贴一小段代码 新手谢谢啦。

相关代码

//

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

下面是一个基于官方列子修改的，具体实现还需你自己动手哈

import React, { Component } from "react";
import { List, Calendar, Button } from "antd-mobile";
import dayjs from "dayjs";
import "./styles.css";
import "antd-mobile/dist/antd-mobile.css";

const now = new Date();

class CalendarCom extends Component {
  constructor(props) {
    super(props);

    this.state = {
      show: false
    };
  }

    // 这个就是快捷栏
  renderShortcut = onSelect => {
    return (
      <div style={{ display: "flex" }}>
        <Button
          style={{ flex: "1" }}
          onClick={() => {
            onSelect(new Date(), new Date());
          }}
        >
          今天
        </Button>
        <Button
          style={{ flex: "1" }}
          onClick={() => {
            // 点击设置calendar的选中状态
            onSelect(new Date(), new Date(dayjs().add(1, "week")));
          }}
        >
          7天
        </Button>
        <Button style={{ flex: "1" }}>3</Button>
        <Button style={{ flex: "1" }}>4</Button>
      </div>
    );
  };

  render() {
    const { show } = this.state;
    return (
      <div className="App">
        <List>
          <List.Item
            arrow="horizontal"
            onClick={() => {
              document.getElementsByTagName("body")[0].style.overflowY =
                "hidden";
              this.setState({
                show: true
              });
            }}
          >
            '选择日期区间(快捷)'
          </List.Item>
        </List>
        <Calendar
          showShortcut
          visible={show}
          renderShortcut={this.renderShortcut}
          defaultDate={now}
          minDate={new Date(+now - 5184000000)}
          maxDate={new Date(+now + 31536000000)}
        />
      </div>
    );
  }
}

export default CalendarCom;