Getting Started

Install dependencies,

$ yarn add mix-datepicker

import React, { useState } from 'react';
import { RangePicker } from 'mix-datepicker';
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',
            },
        ]}
      />
    </div>,
  ];
}

版本更新：

--2021-09-17 --添加dayLeftSide参数控制day面板中左侧是否选择框是否隐藏，默认为false