@beisen/DateTime

DateTime

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@beisen/DateTime
Minified + gzip package size for @beisen/DateTime in KB

Readme

DateTime 使用说明

项目运行

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

  2. npm run dev (开发环境打包 port:8080)

  3. npm run test (测试用例)

  4. npm run build (生产环境打包)

DateTime参数





  state = {
    TimeData : {
      "title":"测测试测试试试试"   //时间控件前的label
      ,"value":"2016-12-12 12:12:12"
                                 /*input框里的值,主要用于重置时间,非必须定义
                                  优先级比defaultValue高
                                  */
      ,"defaultValue":""
                                  /**初始默认时间(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"] ,无初始值:[]
                                  **/
      ,"showTime":true            //增加时间选择功能
      ,"dateStyle":"MonthPicker" /**日期展示的格式 DatePicker(单个日历)  RangePicker(范围日历) MonthPicker(月日历) (string)**/               
      ,"format":"yyyy-MM-dd HH:mm:ss"     /**展示的时间格式 "yyyy-MM-dd" "yyyy-MM-dd HH:mm:ss" "yyyy-MM"  "yyyy-MM"(月日历) (string)**/         
      ,"placeholder":"请选择日期"    /**没有值时的提示,仅对单日历生效 (string)**/          
      ,"startPlaceholder": "开始时间"/**没有值时的提示,开始日期提示,仅对范围日历生效 (string)**/
      ,"endPlaceholder": "截止时间"   /**没有值时的提示,结束日期提示,仅对范围日历生效 (string)**/
      ,"disabled":false           /**禁用全部操作 (bool)**/ 
      ,"readonly":false    //只读,无法点击  
      ,"required":true      /**是否必填**/
      ,"disabledDate":"empty"               
                                  /**指定不可选择日期 (string)
                                    注意:仅对单日历有效!!
                                    "all" 所有日期都不可选
                                    "beforeToday" 不可选择今天之前的日期(包括今天)
                                    "afterToday" 不可选择今天之后的日期
                                    "empty" 所有日期都可选
                                    "lasttwoweeks" 过去两周可选
                                  **/
      ,"style":{                  //自定义输入框样式
        "width":"50%"
        ,"height":""
      }
      ,"hidden":false  //是否显示
      ,"showStatus":"是否报错"  //显示状态 "search" or ""
      ,"errorStatus":true //是否报错
      ,"errorMsg":"出错了~~~!" //报错信息
      ,"onChange":function(value,booldata){console.log(value,booldata)} /**点击后时间回调**/
    }
  }

DateTime调用方法

  1. 引用组件
import DateTime from "./src/index"
  1. 传入参数

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


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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.