flossom-miniapp/src/components/calendar/controller/index.tsx

import classnames from "classnames";
import Taro from "@tarojs/taro";
import dayjs, { Dayjs } from "dayjs";
import React from "react";
import { Text, View, Block, Image } from "@tarojs/components";
import { DatetimePicker, Popup } from "@antmjs/vantui";
import _ from "lodash";

import {
  AtCalendarControllerProps,
  AtCalendarControllerState,
} from "../../../../types/calendar";

import "./index.less";

let _currentDate = 0;

export default class AtCalendarController extends React.Component<any, any> {
  public constructor(props: any) {
    super(props);
    this.state = {
      showDatePicker: false,
      selectDate: 0,
      curDate: dayjs(this.props.currentDate).valueOf(),
      tempDate: 0,
    };
  }

  onChangeDate = (e) => {
    e.stopPropagation();
  };

  onInput = (e) => {
    _currentDate = e.detail;
  };

  onClickStop = (e) => {
    e.stopPropagation();
  };

  onSelectDate = () => {
    this.props.onSelectDate(_currentDate);
    this.onPopupClose();
  };

  onPopupClose = () => {
    this.setState({ showDatePicker: false });
  };

  onConfirm(e) {
    console.log("confirm", e);
  }

  openDate = () => {
    this.setState({
      showDatePicker: true,
      curDate: dayjs(this.props.currentDate).valueOf(),
    });
  };

  public render(): JSX.Element {
    const {
      generateDate,
      minDate,
      maxDate,
      monthFormat,
      hideArrow,
      currentDate,
    } = this.props;

    const dayjsDate: Dayjs = dayjs(generateDate);
    const dayjsMinDate: Dayjs | boolean = !!minDate && dayjs(minDate);
    const dayjsMaxDate: Dayjs | boolean = !!maxDate && dayjs(maxDate);

    const isMinMonth: boolean =
      dayjsMinDate && dayjsMinDate.startOf("month").isSame(dayjsDate);

    const isMaxMonth: boolean =
      dayjsMaxDate && dayjsMaxDate.startOf("month").isSame(dayjsDate);

    const minDateValue: string = dayjsMinDate
      ? dayjsMinDate.format("YYYY-MM")
      : "";
    const maxDateValue: string = dayjsMaxDate
      ? dayjsMaxDate.format("YYYY-MM")
      : "";

    let { showDatePicker, curDate } = this.state;

    _currentDate = curDate;

    return (
      <Block>
        <View className="at-calendar__controller controller flex-justify-sb">
          {hideArrow ? null : (
            <View
              className={classnames(
                "controller__arrow controller__arrow--left",
                {
                  "controller__arrow--disabled": isMinMonth,
                }
              )}
              onClick={this.props.onPreMonth.bind(this, isMinMonth)}
            />
          )}
          <View className="calendar-top-date-btn">
            <View
              style="display: flex;align-items: center;"
              onClick={this.openDate}
            >
              {/* <Text className="controller__info"></Text> */}
              {/* <Text>{dayjsDate.format(monthFormat)}</Text> */}
              <Text style={{ fontSize: "36rpx", fontWeight: "600" }}>
                {dayjsDate.format("YYYY.MM.DD")}
              </Text>
              <View style="margin-left: 34rpx;">
                <Image
                  src={require("../img/calendar.png")}
                  style="width:34rpx;height:34rpx;"
                />
              </View>
            </View>
          </View>

          <View></View>
        </View>

        <Popup
          show={showDatePicker}
          position="bottom"
          // close-icon="/img/fr200/close.png"
          round
          onClick={this.onClickStop}
          // onClose={this.onPopupClose}
        >
          <View className="toolbar">
            <View className="toolbar_title">
              <Text>选择日期</Text>
              <View
                style="margin-left: 20rpx;color:#666;font-size: 34rpx"
                className="at-icon at-icon-close popup-date-close"
                onClick={this.onPopupClose}
              ></View>
            </View>
            <View className="select_box">
              <View className="text">已选择日期</View>
              <View className="date">{currentDate}</View>
            </View>
          </View>
          <DatetimePicker
            type="date"
            value={curDate}
            maxDate={maxDate}
            onInput={_.throttle(this.onInput.bind(this), 500)}
          />
          <View className="btn_confirm" onClick={this.onSelectDate}>
            确定
          </View>
        </Popup>
      </Block>
    );
  }
}