0.0.5 • Published 7 years ago
@beisen/upaas-timepicker-search v0.0.5
@beisen/upaas-textbox-search
- 日历搜索态组件
- 默认需要的参数
/**参数
* "title": "开发态标准时分",
"value" : "11:11:11", //时间的值
"defaultValue" : "", //**初始默认时间(string) 默认日期的格式需与format格式相同!!!!
"size" : "", //
"placeholder" : "开发态标准时分",/**没有值的时候显示的内容(string)**/
"format" : "HH:mm",/**展示的时间格式 "HH:mm:ss"、"HH:mm"、"mm:ss" (string)**/
"disabled" : false,/**禁用全部操作 (bool)**/
"hidden" : false,/**是否隐藏**/
"readonly": false,/**是否只读**/
"showStatus" : "是否报错",//显示状态 "search" or ""
"required" : false,/**是否必填**/
"disabledHours":{
"value":[22,3],
"limit" : "open" /**限制选择部分 小时选项(array)
[开始时间(小时),结束时间(小时)]
limit: open 启用限制
close 关闭限制
范围:0~24
结束时间可小于开始时间
**/
},
"disabledMinutes":{
"value":[40,10],
"limit":"open" /**限制选择部分 分钟选项(array)
value:[开始分钟,结束分钟]
limit: open 启用限制
close 关闭限制
范围:0~60
结束时间可小于开始时间
如果想实现任意时间段的禁用,在value数组中传入多个范围数组即可,例如:[[1,7],[34,45]]
**/
},
"disabledSeconds":{ /**限制选择部分 秒选项(array) ,配置规范同分钟**/
"value":[0,30],
"limit":"open"
},
"hideDisabledOptions" : false,/**隐藏禁止选择的选项 (bool)**/
"errorStatus" : false,//是否报错
"errorMsg":"出错了……",//报错信息
"cmp_type":"BC_Time",//类型
"cmp_id":"852fb18d-6031-463f-b62f-889acb92ff29",
"onChange":function(time,booldata){ /**点击后时间回调**/
console.log(time,booldata);
},
"onSaveSearchStatus":function(status,cmp_type){ //请求action
console.log(cmp_type,status);
},
"onGobalClick":function(e,cmp_id){ //请求action
console.log(e);
console.log(cmp_id);
}
*/
- 使用demo
import TimePickerSearch from '@beisen/upaas-timepicker-search';
class Demo extends Component{
getInitData(){
let initData = {
"title": "开发态标准时分",
"value" : "",
"defaultValue" : "",
"size" : "",
"placeholder" : "开发态标准时分",
"format" : "HH:mm",
"disabled" : false,
"hidden" : false,
"readonly": false,
"showStatus" : "是否报错",
"required" : false,
"disabledHours":{
"value":[22,3],
"limit" : "open"
},
"disabledMinutes":{
"value":[40,10],
"limit":"open"
},
"disabledSeconds":{
"value":[0,30],
"limit":"open"
},
"hideDisabledOptions" : false,
"errorStatus" : false,
"errorMsg":"出错了……",
"cmp_type":"BC_Time",
"cmp_id":"852fb18d-6031-463f-b62f-889acb92ff29",
"onChange":function(time,booldata){
console.log(time,booldata);
},
"onSaveSearchStatus":function(status,cmp_type){
console.log(cmp_type,status);
},
"onGobalClick":function(e,cmp_id){
console.log(e);
console.log(cmp_id);
}
}
return initData;
}
render () {
let data = this.getInitData();
return (
<div>
<UpaasTimePicker {...data} />
</div>
)
}
}