# @beisen-platform/date-time

> 输入或选择日期的控件，当用户需要输入一个日期， 可以点击标准输入框，弹出日期面板进行选择。

Latest version **1.1.0-9** (published 2019-11-07) · ISC license · 0 weekly downloads

## Install

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

## 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-9 |
| Published | 2019-11-07 |
| First published | 2018-11-30 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 472.1 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/date-time
- Repository: http://gitlab.beisencorp.com/ux-cnpm/ux-date-time
- npm.io page: https://npm.io/package/@beisen-platform/date-time

## Dependencies (14)

- [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
- [rc-calendar](https://npm.io/package/rc-calendar.md) ^5.5.4
- [css-animation](https://npm.io/package/css-animation.md) 1.x
- [rc-time-picker](https://npm.io/package/rc-time-picker.md) ^1.1.6
- [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-9 (latest) — 2019-11-07
- 1.1.0-8 — 2019-11-04
- 1.1.0-7 — 2019-10-29
- 1.1.0-6 — 2019-10-29
- 1.1.0-5 — 2019-10-29
- 1.1.0-4 — 2019-10-25
- 1.1.0-3 — 2019-10-22
- 1.1.0-2 — 2019-09-29
- 1.1.0-1 — 2019-09-29
- 1.0.47 — 2019-09-11
- 1.0.46 — 2019-08-21
- 1.0.45 — 2019-08-21
- 1.0.44 — 2019-08-20
- 1.0.43 — 2019-08-12
- 1.0.42 — 2019-08-12
- … 45 more at https://npm.io/package/@beisen-platform/date-time/versions

## README

# date-time 使用说明

## 项目运行

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

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

3. npm run test （测试用例）

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

## DateTime参数


```javascript
const props = {
    TimeData:{

      /**
       * 时间控件前的label
       */
      title:"测测试测试试试试",

      /**
       * input框里的值
       * 主要用于重置时间，非必须定义
       * 优先级比defaultValue高
       */
      value:"2016-12-12 12:12:12",

      /**
       * 初始默认时间(string) 
       * 注意：
       * 1.默认日期的格式需与format格式相同!!!! 
       * 2.日期格式可以是 "yyyy-MM-dd" 或者 "yyyy/MM/dd"，并符合第一条注意点
       * 3.如果是单日历，则类型为字符串，如果是范围日历，则类型为数组：
       * 
       * 单日历：  有初始值："2016-12-12 12:12:12" 或 "2016-12-12" ， 无初始值：""
       * 月日历：  有初始值："2015-12"   无初始值: null 
       * 范围日历：有初始值：["2016-1-1 11:11:11","2016-12-12 12:12:12"] ，无初始值：[]
       */
      defaultValue:"",

      /**
       * 增加时间选择功能
       */
      showTime:true,

      /**
       * 日期展示的格式 
       * RangePicker      范围日历
       * RangePickerMonth 月范围
       * RangePickerYear  年范围
       * DatePicker       单个日历
       * MonthPicker      月日历
       * YearPicker       年日历
       */
      dateStyle:"DatePicker",    
      
      /**
       * 展示的时间格式
       * "yyyy-MM-dd"
       * "yyyy-MM-dd HH:mm:ss"
       * "yyyy-MM"
       */ 
      format:"yyyy-MM-dd HH:mm:ss",     

      /**
       * 没有值时的提示
       * （仅对单日历生效）
       */
      placeholder:"请选择日期",

      /**
       * 没有值时的提示
       * 开始日期提示，仅对范围日历生效
       */
      startPlaceholder: "开始时间",

      /**
       * 没有值时的提示
       * 结束日期提示，仅对范围日历生效
       */
      endPlaceholder: "截止时间",

      /**
       * 禁用全部操作
       * bool
       */
      disabled:false,

      /**
       * 只读，无法点击
       */
      readonly:false,

      /**
       * 是否展示label前的必填红点
       */
      required:true,

      /**
       * 指定不可选择日期
       * 注意：仅对单日历有效！！
       * all            所有日期都不可选
       * beforeNotToday 不可选择今天之前的日期(不包括今天)
       * beforeToday    不可选择今天之前的日期(包括今天)
       * afterToday     不可选择今天之后的日期
       * empty          所有日期都可选
       * lasttwoweeks   过去两周可选
       */
      disabledDate:"empty",               

      /**
       * 自定义输入框样式
       */
      style:{
        "width":"50%",
        "height":""
      },

      /**
       * 激活状态
       * 需要通过changeActive方法改变组件外部state
       */
      isActive:this.state.isActive,

      /**
       * 性能打点需要的，暂时无用
       */
      cmp_id: '01',

      /**
       * 是否显示外侧删除按钮
       */
      showOutDel:false,

      /**
       * 是否显示
       */
      hidden:false,

      /**
       * 显示状态 "search" or "",'searchBtn' (仅针对BeisenCloud)
       */
      showStatus:"",

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

      /**
       * 报错信息
       */
      errorMsg:"出错了~~~！",

      
      helpMsg:"adsa",

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

      /**
       * label文字的对齐方式
       * true  左对齐
       * false 右对齐
       */
      lableTxt: true,
      
      /**
      * 是否去掉右侧的图标
      * true  去掉
      * false 不去掉
      */
      removeSuffixIcon: false,

      changeActive:function(isActive){
        //修改激活状态
        self.setState({isActive:isActive})
      },
      
      onChange:function(value,isToday){self.test(value)} /**点击后时间回调,isToday为打点需要**/
    }
}

```

## date-time

1.安装npm组件包

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

2.引用组件

  ```javascript
import DateTime from "@beisen/date-time"
  ```

3. 传入参数

  该参数为上述参数，传入方式使用: data={参数}
  ```javascript

  test(){
    //点击重置按钮后将value变为空
    this.setState({value:""})
  }
  render () {
      return (
        <div>
          <button onClick={::this.test}></button>
          <DateTime {...this.state} />
        </div>
      )
    }
  ```

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