RN项目下webview的自定义日历样式组件

1.js代码

import React, { useEffect, useState } from 'react';
import moment from 'moment';
import styles from './index.less';

interface Props {
  date: number;
  /**可选最小日期 */
  minDate?: number;
  /**被选中日期回调 */
  onChange?: (date: number) => any;
}
interface Day {
  day: number,
  date: number,
  week: string
}
export default function ({ date, minDate, onChange }: Props) {
  const week = ['日', '一', '二', '三', '四', '五', '六'];
  const [days, setDays] = useState<Day[][]>([]);
  const [selectDay, setSelectDay] = useState<number>();
  useEffect(() => {
    date && getData();
  }, [date]);

  function getData() {
    const monthDay: number = moment(date).daysInMonth();
    const dayList: Day[] = [];
    const monthStr = moment(date).format("YYYY-MM-")
    for (let i = 1; i < monthDay + 1; i++) {
      const day = moment(monthStr + prefixZero(i, 2), 'YYYY-MM-DD');
      dayList.push({ day: i, date: day.valueOf(), week: weekDay(day.toDate()) });
    }
    const index = week.findIndex(i => i == dayList[0].week);
    const arr: Day[] = [...new Array(index).fill({}), ...dayList];
    const arrList: Day[][] = [];
    let list: Day[] = [];
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].week == '六') {
        list.push(arr[i]);
        arrList.push(list);
        list = [];
      } else {
        list.push(arr[i]);
      }
    }
    if (list.length) {
      arrList.push(list);
    }
    setDays(arrList);
  }

  function prefixZero(num: number, n: number) {
    return (Array(n).join('0') + num).slice(-n);
  }

  function getTimeValueOf(value: number) {
    return moment(moment(value).format('YYYY-MM-DD'), 'YYYY-MM-DD').valueOf()
  }
  function weekDay(date: Date) {
    if (!date) {
      return '';
    }
    return String(date.getDay())
      .replace("0", "日")
      .replace("1", "一")
      .replace("2", "二")
      .replace("3", "三")
      .replace("4", "四")
      .replace("5", "五")
      .replace("6", "六");
  }

  function _onSelect(i: Day) {
    if (minDate && i.date < getTimeValueOf(minDate)) return;
    setSelectDay(i.date);
    onChange && onChange(i.date);
  }

  function initStyles(i: Day) {
    if (minDate && i.date < getTimeValueOf(minDate)) {
      return styles.disableDateWrapper
    }
    return styles.dateWrapper;
  }

  return (
    <div className={styles.container}>
      <div className={styles.calendarWrap}>
        <div className={styles.calendarRow}>
          {week.map((i, index) => (
            <span key={index} style={{ fontSize: 14, color: '#333', width: `${100 / 7}%`, textAlign: 'center' }} >{i}</span>
          ))}
        </div>
        {days.map((item, index) => (
          <div key={index} className={styles.dateRow}>
            {item.map((i, ind) => i.date ? (
              <div key={i.date} className={styles.singleWraper}>
                <div className={i.date == selectDay ? styles.selectDate : initStyles(i)} onClick={() => _onSelect(i)}>{i.day}</div>
              </div>
            ) : (
              <span key={ind} style={{ width: `${100 / 7}%` }} />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

2.less代码

.container {
  .calendarWrap {
    display: flex;
    background-color: #fff;
    padding-top: 15px;
    flex-direction: column;
  }

  .calendarRow {
    width: '100%';
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    border-bottom-color: #EEEEEE;
    border-bottom-width: 0.5px;
    border-bottom-style: solid;
    padding-bottom: 10px
  }

  .dateRow {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 10px 0;
  }

  .singleWraper {
    font-size: 14;
    color: #333;
    width: 14.28%;
    height: 47px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .dateWrapper {
      display: flex;
      height: 30px;
      width: 100%;
      justify-content: center;
      align-items: center;
      margin-bottom: 2px;
    }

    .disableDateWrapper {
      .dateWrapper;
      color: #999999;
    }

    .selectDate {
      display: flex;
      height: 30px;
      width: 30px;
      border: none;
      background: #108ee9;
      color: #fff;
      border-radius: 100%;
      font-size: 17px;
      justify-content: center;
      align-items: center;
      margin-bottom: 2px;
    }

    .info {
      height: 15px;
      width: 100%;
      text-overflow: ellipsis;
      font-size: 10px;
      color: #CCCCCC;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: center;
    }

    .selectInfo {
      height: 15px;
      width: 100%;
      // padding: 0 5px;
      text-overflow: ellipsis;
      font-size: 10px;
      color: #438AFD;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      text-align: center;
    }
  }
}