umi project

Getting Started

Install dependencies,

$ yarn

Start the dev server,

$ yarn start

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

function App() {
  const [active, setActive] = useState(true);
  const [value, setValue] = useState([moment()]);
  const [disables] = useState(['2021-05', '2021-06']);
  const onChange = (value) => {
    setValue(value);
  };
  return [
    <div>
      selected: {Array.isArray(value) ? value.join(',') : value}
    </div>,
    <div className="App">
      <div>
        <div
          className={`tabItem ${active === true ? 'tabActive' : null}`}
          onClick={() => {
            setActive(!active);
          }}
        >
          多选
        </div>
        <div
          className={`tabItem ${active === false ? 'tabActive' : null}`}
          onClick={() => {
            setActive(!active);
          }}
        >
          单选
        </div>
      </div>
      <RangePicker
          hourLeftSide={false} // 控制hour左侧选择框是否隐藏，默认 false
          dayLeftSide={false} // 控制day左侧选择框是否隐藏，默认false
          startYear={2017} //开始年份，默认2019
          endYear={'2022-05-20'}
          range={active} // 单选或者双选
          onChange={onChange} //当选择值改变的时候， onchange回调
          value={value} // 初始化选中的日期 支持string与Array
          disables={disables} // 禁止选择的日期 支持Function与Array
          headerTabShow={true} // tab头部是否显示
          type={tab} // 初始化选中的tab类型
          tabOptions={[ //tab选择项
            {
              tabName: 'Day',
            },
            {
              tabName: 'Month',
            },
        ]}
         titleName={'Release'}
      />
    </div>,
  ];
}
### 版本更新：
  --2023-03-02
    --支持 disableBtn 函数参数，返回 true 时 confirm 按钮置灰不可选
  --2023-02-20
    --支持 disables 变更
  --2021-09-17
    --添加dayLeftSide参数控制day面板中左侧是否选择框是否隐藏，默认为false
  --2021-10-26
    --添加titleName参数,类型为string，默认值为空
  --2021-10-27
    --添加tabChange参数，类型为函数，返回一个参数，为切换的tab值
    --添加autoStartDay参数，类型为布尔值，默认值为true
  --2021-10-28
    --添加confirmBack参数，类型为函数，返回两个参数，第一个为选中的日期，第二个为tab值
  --2022-3-23
    --修改NewDayPanel中today受控于rangeDate
    --修复切换 tab format 格式错乱的问题
    --可配置结果时间格式
  --2022-3-28
    --移除组件内部样式的字体
    --修复英文浏览器字号显示1px的问题
  --2022-3-31
    --新增禁止选择当天的功能
  --2022-4-14
    -- 修复开关筛选器，选择为周维度的时候累加一周的问题
  --2022-5-6
    -- 修复日面板单选日期时没有重置状态的问题
  --2022-5-12
    -- 增加根据不同时间类型展示不同默认值功能, defaultValueByType
    -- 取消操作时恢复默认 timeType
  --2022-5-23
    -- 默认值优化，组件 value 修改后不再使用默认值
  --2022-6-17
    -- 修复单选模式下，无法输入日期的问题
  --2022-6-28
    -- 增加open时的回调
  --2022-07-18
    -- 修复时间筛选器周维度无法输入时间的问题
  --2022-08-10
    -- 增加禁用 tab 功能
  --2022-12-07
    -- 接收style和classname