All files / src/datepicker/_example RangePickerDisabledExample.jsx

16.67% Statements 3/18
0% Branches 0/10
9.09% Functions 1/11
16.67% Lines 3/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72        1x   1x                                                                             1x                                                    
import React, { useState } from "react";
import moment from "moment";
import { DatePicker } from "@tencent/tea-component/lib/datepicker";
 
const { RangePicker } = DatePicker;
 
const range = (s, t) =>
  Array(t - s + 1)
    .fill(0)
    .map((_, i) => s + i);
 
export default () => {
  function disabledDate(date, start) {
    // 选择范围在今天之前,且选择跨度不大于七天
    const isAfterToday = date.isAfter(moment(), "day");
    if (moment.isMoment(start)) {
      return (
        !isAfterToday &&
        !(
          moment(date)
            .subtract(6, "day")
            .isAfter(start, "day") ||
          moment(date)
            .add(6, "day")
            .isBefore(start, "day")
        )
      );
    }
    return !isAfterToday;
  }
 
  function disabledTime(dates, partial) {
    // const [start, end] = dates;
    if (partial === "start") {
      return {
        disabledHours: () => [...range(0, 8), ...range(18, 23)],
        disabledMinutes: hour => (hour === 9 ? range(0, 29) : []),
      };
    }
    return {
      disabledHours: () => range(17, 19),
      disabledSeconds: () => range(1, 59),
    };
  }
 
  return (
    <>
      <section>
        <h3>disabledDate 限制</h3>
        <RangePicker
          disabledDate={disabledDate}
          onChange={value =>
            console.log(
              value[0].format("YYYY/MM/DD"),
              value[1].format("YYYY/MM/DD")
            )
          }
        />
      </section>
      <section>
        <h3>disabledTime 限制</h3>
        <RangePicker
          showTime={{ minuteStep: 5, secondStep: 30 }}
          disabledDate={disabledDate}
          disabledTime={disabledTime}
          onChange={value => console.log(value[0].format(), value[1].format())}
        />
      </section>
    </>
  );
};