date-time 使用说明
项目运行
-
cnpm install 或 npm install cnpm使用教程
-
npm run dev (开发环境打包 port:8080)
-
npm run test (测试用例)
-
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":"DatePicker" /**日期展示的格式
RangePicker,(范围日历)
RangePickerMonth,(月范围)
RangePickerYear,(年范围)
DatePicker,(单个日历)
MonthPicker,(月日历)
YearPicker,(年日历) (string)
**/ 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" 所有日期都不可选
"beforeNotToday" 不可选择今天之前的日期(不包括今天)
"beforeToday" 不可选择今天之前的日期(包括今天)
"afterToday" 不可选择今天之后的日期
"empty" 所有日期都可选
"lasttwoweeks" 过去两周可选
**/
,"style":{ //自定义输入框样式
"width":"50%"
,"height":""
}
,"isActive":this.state.isActive //激活状态,需要通过changeActive方法改变组件外部state
// ,'cmp_id': '01' //性能打点需要的,暂时无用
,"showOutDel":false //是否显示外侧删除按钮
,"hidden":false //是否显示
,"showStatus":"" //显示状态 "search" or "",'searchBtn' //仅针对BeisenCloud
,"errorStatus":false //是否报错
,"errorMsg":"出错了~~~!" //报错信息
,"helpMsg":"adsa"
,"lablePos": false //label位置,true时在左边,false在上边
,"lableTxt": true //label中文字对齐方式,true左对齐,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.引用组件
import DateTime from "@beisen/date-time"
- 传入参数
该参数为上述参数,传入方式使用: data={参数}
test(){
//点击重置按钮后将value变为空
this.setState({value:""})
}
render () {
return (
<div>
<button onClick={::this.test}></button>
<DateTime {...this.state} />
</div>
)
}