# @beisen-platform/time-picker

> ## 项目运行

Latest version **1.1.0** (published 2019-08-19) · ISC license · 0 weekly downloads

## Install

```sh
npm install @beisen-platform/time-picker
pnpm add @beisen-platform/time-picker
yarn add @beisen-platform/time-picker
bun add @beisen-platform/time-picker
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-08-19 |
| First published | 2018-11-29 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Unpacked size | 183.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | beisen |
| Maintainers | beisencorp |
| Keywords | beisen, react-component, es6 |

## Links

- npm: https://www.npmjs.com/package/@beisen-platform/time-picker
- npm.io page: https://npm.io/package/@beisen-platform/time-picker

## Dependencies (12)

- [rc-util](https://npm.io/package/rc-util.md) 4.6.0
- [dom-align](https://npm.io/package/dom-align.md) 1.x
- [classnames](https://npm.io/package/classnames.md) ~2.2.0
- [css-animation](https://npm.io/package/css-animation.md) 1.x
- [gregorian-calendar](https://npm.io/package/gregorian-calendar.md) ~4.1.6
- [@beisen-platform/tool-tip](https://npm.io/package/@beisen-platform/tool-tip.md)
- [gregorian-calendar-format](https://npm.io/package/gregorian-calendar-format.md) ~4.1.3
- [@beisen/create-react-class](https://npm.io/package/@beisen/create-react-class.md) 15.x.x
- [@beisen-platform/common-func](https://npm.io/package/@beisen-platform/common-func.md)
- [@beisen-platform/react-icons](https://npm.io/package/@beisen-platform/react-icons.md)
- [@beisen/es6-promise-debounce](https://npm.io/package/@beisen/es6-promise-debounce.md)
- [@beisen-platform/common-label](https://npm.io/package/@beisen-platform/common-label.md)

## Recent versions

- 1.1.0 (latest) — 2019-08-19
- 1.0.9 — 2019-08-15
- 1.0.7 — 2019-07-16
- 1.0.6 — 2019-06-10
- 1.0.5 — 2019-06-05
- 1.0.4 — 2019-05-22
- 1.0.3-rc.1 — 2019-04-29
- 1.0.3 — 2019-03-15
- 1.0.2 — 2019-01-23
- 1.0.1 — 2019-01-03
- 1.0.0 — 2018-12-07
- 0.2.64 — 2018-11-29

## README

# time-picker 使用说明

## 项目运行

1. cnpm install 或 npm install cnpm使用教程

2. npm run dev （开发环境打包 port:8080）

3. npm run test （测试用例）

4. npm run build （生产环境打包）

## time-picker参数
  
```javascript
const props = {

  title: '测试时测试按错撒',

  /**
   * 时间的值
   */
  value: '', //

  /**
   * 初始默认时间
   * 默认日期的格式需与format格式相同
   */
  defaultValue: '',

  /**
   * 没有值的时候显示的内容
   */
  placeholder: '大家好',

  /**
   * 展示的时间格式
   * HH:mm:ss
   * HH:mm
   * mm:ss
   */
  format: 'HH:mm',

  /**
   * 禁用全部操作
   */
  disabled: false,
  /**
   * 是否隐藏
   */

  hidden: false,

  /**
   * 是否只读
   */
  readonly: true,

  /**
   * 是否必填
   */
  required: true,

  open: false,

  /**
   * 不可选择的小时范围
   */
  disabledHours: {

    /**
     * [开始时间(小时)，结束时间(小时)]
     * 范围：0~24
     */
    value: [22, 3],

    /**
     * 是否启用该限制规则
     * open  启用限制
     * close 关闭限制
     */
    limit: 'close'
  },

  /**
   * 不可选择的分钟范围
   */
  disabledMinutes: {

    /**
     * [开始时间(分钟)，结束时间(分钟)]
     * 范围：0~60
     */
    value: [
      [13, 18],
      [40, 10]
    ],

    /**
     * 是否启用该限制规则
     * open  启用限制
     * close 关闭限制
     */
    limit: 'open'
  },

  /**
   * 不可选择的秒范围
   * 配置规范同分钟
   */
  disabledSeconds: {
    value: [0, 30],
    limit: 'close'
  },

  /**
   * 外部包围输入框的大小
   * 可选：large  small
   */
  size: '',

  /**
   * 隐藏禁止选择的选项
   */
  hideDisabledOptions: false,

  /**
   * 显示状态 
   * search或''
   */
  showStatus: '',

  /**
   * 是否报错
   */
  errorStatus: false,

  /**
   * 报错信息
   */
  errorMsg: '出错了~~~！',
  helpMsg: 'dqwdqwdqw',

  /**
   * 控制外层close按钮是否显示
   * 非必需参数
   */
  closeBtn: false,

  /**
   * label位置
   * true  左边
   * false 上边
   */
  lablePos: true,

  /**
   * label中文字对齐方式
   * true  左对齐
   * false 右对齐
   */
  lableTxt: false,

  /**
   * 点击时间后回调
   */
  onChange: function (time, booldata) {
    console.log(time, booldata)
  },

  /**
   * 弹层出现回调
   */
  onOpen: function (bool) {
    console.log(bool)
  },

  /**
   * 弹层关闭回调
   */
  onClose: function (bool) {
    console.log(bool)
  }
}

```

## TimePicker调用方法

1.安装npm组件包

```
npm install @beisen/time-picker --save-dev
```

2.引用组件

  ```javascript
import TimePicker from "@beisen/time-picker"
  ```
3. 传入参数

  该参数为上述参数，传入方式使用: 
  ```javascript
  render () {
      return (
        <TimePicker {...this.state} />
      )
    }
  ```

---
_Source: https://npm.io/package/@beisen-platform/time-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._