# mix-datepicker-pc

> # umi project

Latest version **0.0.59** (published 2023-06-20) · 0 weekly downloads

## Install

```sh
npm install mix-datepicker-pc
pnpm add mix-datepicker-pc
yarn add mix-datepicker-pc
bun add mix-datepicker-pc
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.59 |
| Published | 2023-06-20 |
| First published | 2022-03-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 151 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | cody1991, liumingyang, lisi2580 |

## Links

- npm: https://www.npmjs.com/package/mix-datepicker-pc
- npm.io page: https://npm.io/package/mix-datepicker-pc

## Dependencies (3)

- [dayjs](https://npm.io/package/dayjs.md) ^1.10.7
- [jquery](https://npm.io/package/jquery.md) ^3.6.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## Recent versions

- 0.0.59 (latest) — 2023-06-20
- 0.0.58 — 2023-06-19
- 0.0.57 — 2023-05-10
- 0.0.56 — 2023-04-03
- 0.0.55 — 2023-03-07
- 0.0.54 — 2023-03-07
- 0.0.53 — 2023-03-03
- 0.0.52 — 2023-03-03
- 0.0.51 — 2023-03-03
- 0.0.50 — 2023-03-03
- 0.0.49 — 2023-03-02
- 0.0.48 — 2023-03-02
- 0.0.47 — 2023-03-02
- 0.0.46 — 2023-02-20
- 0.0.45 — 2022-12-12
- … 42 more at https://npm.io/package/mix-datepicker-pc/versions

## README

<!--
 * @Author: zenghao
 * @Date: 2022-03-10 14:40:47
 * @LastEditors: zenghao
 * @LastEditTime: 2022-05-06 10:14:04
 * @Description: 请填写简介
-->
# umi project

## Getting Started

Install dependencies,

```bash
$ yarn
```

Start the dev server,

```bash
$ 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

---
_Source: https://npm.io/package/mix-datepicker-pc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._