@beisen/date-time

date-time 使用说明

项目运行

• cnpm install 或 npm install cnpm使用教程

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

• npm run test （测试用例）

• npm run build （生产环境打包）

DateTime参数

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,

      changeActive:function(isActive){
        //修改激活状态
        self.setState({isActive:isActive})
      },
      
      onChange:function(value,isToday){self.test(value)}, /**点击后时间回调,isToday为打点需要**/
    /**
     *  多语言参数
     */
      translation: { 
          localeName: 'zh_CN' // 组件的语言类型
      }
    }
}

date-time

1.安装npm组件包

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

2.引用组件

import DateTime from "@beisen/date-time"

• 传入参数

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

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