我们使用允许构建自定义 ui 和相关控件（例如日期选择器）的数据容器。
这是我们的一个容器的主要架构，
{
"key":"panel",
"type":"panel",
"input":false,
"label":"Custom Control",
"title":"Custom Control",
"collapsed":true,
"tableView":false,
"components":[
{
"key":"date1",
"type":"datetime",
"input":true,
"label":"Date 1",
"format":"dd-MMM-yyyy",
"widget":{
"type":"calendar",
"displayInTimezone":"submission",
"locale":"en",
"useLocaleSettings":false,
"allowInput":true,
"mode":"single",
"enableTime":false,
"noCalendar":false,
"format":"dd-MMM-yyyy",
"hourIncrement":1,
"minuteIncrement":1,
"time_24hr":true,
"minDate":null,
"disableWeekends":false,
"disableWeekdays":false,
"maxDate":null
},
"tableView":false,
"datePicker":{
"disableWeekdays":false,
"disableWeekends":false,
"showWeeks":true,
"startingDay":0,
"initDate":"",
"minMode":"day",
"maxMode":"year",
"yearRows":4,
"yearColumns":5,
"minDate":null,
"maxDate":null
},
"enableTime":false,
"timePicker":{
"showMeridian":false,
"hourStep":1,
"minuteStep":1,
"readonlyInput":false,
"mousewheel":true,
"arrowkeys":true
},
"placeholder":"Date",
"displayInTimezone":"submission",
"enableMaxDateInput":false,
"enableMinDateInput":false,
"hideOnChildrenHidden":false,
"prefix":"",
"customClass":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"hidden":false,
"clearOnHide":true,
"refreshOn":"",
"redrawOn":"",
"modalEdit":false,
"labelPosition":"top",
"description":"",
"errorLabel":"",
"tooltip":"",
"hideLabel":false,
"tabindex":"",
"disabled":false,
"autofocus":false,
"dbIndex":false,
"customDefaultValue":"",
"calculateValue":"",
"calculateServer":false,
"attributes":{
},
"validateOn":"change",
"validate":{
"required":false,
"custom":"",
"customPrivate":false,
"strictDateValidation":false,
"multiple":false,
"unique":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"overlay":{
"style":"",
"left":"",
"top":"",
"width":"",
"height":""
},
"allowCalculateOverride":false,
"encrypted":false,
"showCharCount":false,
"showWordCount":false,
"properties":{
},
"allowMultipleMasks":false,
"useLocaleSettings":false,
"allowInput":true,
"enableDate":true,
"defaultDate":"",
"timezone":"",
"datepickerMode":"day",
"customOptions":{
},
"id":"etmbnm"
},
{
"key":"date2",
"type":"datetime",
"input":true,
"label":"Date 2",
"format":"dd-MMM-yyyy",
"widget":{
"type":"calendar",
"displayInTimezone":"viewer",
"locale":"en",
"useLocaleSettings":false,
"allowInput":true,
"mode":"single",
"enableTime":false,
"noCalendar":false,
"format":"dd-MMM-yyyy",
"hourIncrement":1,
"minuteIncrement":1,
"time_24hr":true,
"minDate":null,
"disableWeekends":false,
"disableWeekdays":false,
"maxDate":null
},
"tableView":false,
"datePicker":{
"disableWeekdays":false,
"disableWeekends":false,
"showWeeks":true,
"startingDay":0,
"initDate":"",
"minMode":"day",
"maxMode":"year",
"yearRows":4,
"yearColumns":5,
"minDate":null,
"maxDate":null
},
"enableTime":false,
"timePicker":{
"showMeridian":false,
"hourStep":1,
"minuteStep":1,
"readonlyInput":false,
"mousewheel":true,
"arrowkeys":true
},
"placeholder":"Date",
"enableMaxDateInput":false,
"enableMinDateInput":false,
"hideOnChildrenHidden":false,
"prefix":"",
"customClass":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"hidden":false,
"clearOnHide":true,
"refreshOn":"",
"redrawOn":"",
"modalEdit":false,
"labelPosition":"top",
"description":"",
"errorLabel":"",
"tooltip":"",
"hideLabel":false,
"tabindex":"",
"disabled":false,
"autofocus":false,
"dbIndex":false,
"customDefaultValue":"",
"calculateValue":"",
"calculateServer":false,
"attributes":{
},
"validateOn":"change",
"validate":{
"required":false,
"custom":"",
"customPrivate":false,
"strictDateValidation":false,
"multiple":false,
"unique":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"overlay":{
"style":"",
"left":"",
"top":"",
"width":"",
"height":""
},
"allowCalculateOverride":false,
"encrypted":false,
"showCharCount":false,
"showWordCount":false,
"properties":{
},
"allowMultipleMasks":false,
"useLocaleSettings":false,
"allowInput":true,
"enableDate":true,
"defaultDate":"",
"displayInTimezone":"viewer",
"timezone":"",
"datepickerMode":"day",
"customOptions":{
},
"id":"euz1b2g"
}
],
"collapsible":true,
"placeholder":"",
"prefix":"",
"customClass":"",
"suffix":"",
"multiple":false,
"defaultValue":null,
"protected":false,
"unique":false,
"persistent":false,
"hidden":false,
"clearOnHide":false,
"refreshOn":"",
"redrawOn":"",
"modalEdit":false,
"labelPosition":"top",
"description":"",
"errorLabel":"",
"tooltip":"",
"hideLabel":false,
"tabindex":"",
"disabled":false,
"autofocus":false,
"dbIndex":false,
"customDefaultValue":"",
"calculateValue":"",
"calculateServer":false,
"widget":null,
"attributes":{
},
"validateOn":"change",
"validate":{
"required":false,
"custom":"",
"customPrivate":false,
"strictDateValidation":false,
"multiple":false,
"unique":false
},
"conditional":{
"show":null,
"when":null,
"eq":""
},
"overlay":{
"style":"",
"left":"",
"top":"",
"width":"",
"height":""
},
"allowCalculateOverride":false,
"encrypted":false,
"showCharCount":false,
"showWordCount":false,
"properties":{
},
"allowMultipleMasks":false,
"tree":false,
"theme":"default",
"breadcrumb":"default",
"id":"eojxt3w"
}
数据容器看起来像，
这里的目的是在日期 2 上进行验证。所以日期 2 不应小于日期 1。
Date 2的组件 json如下所示，
{
"key":"date",
"type":"datetime",
"input":true,
"label":"Date 2",
"format":"dd-MMM-yyyy",
"widget":{
"type":"calendar",
"displayInTimezone":"viewer",
"locale":"en",
"useLocaleSettings":false,
"allowInput":true,
"mode":"single",
"enableTime":false,
"noCalendar":false,
"format":"dd-MMM-yyyy",
"hourIncrement":1,
"minuteIncrement":1,
"time_24hr":true,
"minDate":null,
"disableWeekends":false,
"disableWeekdays":false,
"maxDate":null
},
"validate":{
"json":{
"if":[
{
"===":[
{
"var":"input"
},
"23-May-2021"
]
},
true,
"You have an error"
]
},
"customMessage":"You have an error!",
"required":false,
"custom":"",
"customPrivate":false,
"strictDateValidation":false,
"multiple":false,
"unique":false
},
"tableView":false,
"datePicker":{
"disableWeekdays":false,
"disableWeekends":false,
"showWeeks":true,
"startingDay":0,
"initDate":"",
"minMode":"day",
"maxMode":"year",
"yearRows":4,
"yearColumns":5,
"minDate":null,
"maxDate":null
},
"enableTime":false,
"errorLabel":"Error on data",
"timePicker":{
"showMeridian":false,
"hourStep":1,
"minuteStep":1,
"readonlyInput":false,
"mousewheel":true,
"arrowkeys":true
},
"placeholder":"Date",
"enableMaxDateInput":false,
"enableMinDateInput":false,
"hideOnChildrenHidden":false,
"prefix":"",
"customClass":"",
"suffix":"",
"multiple":false,
"defaultValue":"",
"protected":false,
"unique":false,
"persistent":true,
"hidden":false,
"clearOnHide":true,
"refreshOn":"",
"redrawOn":"",
"modalEdit":false,
"labelPosition":"top",
"description":"",
"tooltip":"",
"hideLabel":false,
"tabindex":"",
"disabled":false,
"autofocus":false,
"dbIndex":false,
"customDefaultValue":"",
"calculateValue":"",
"calculateServer":false,
"attributes":{
},
"validateOn":"change",
"conditional":{
"show":null,
"when":null,
"eq":""
},
"overlay":{
"style":"",
"left":"",
"top":"",
"width":"",
"height":""
},
"allowCalculateOverride":false,
"encrypted":false,
"showCharCount":false,
"showWordCount":false,
"properties":{
},
"allowMultipleMasks":false,
"useLocaleSettings":false,
"allowInput":true,
"enableDate":true,
"defaultDate":"",
"displayInTimezone":"viewer",
"timezone":"",
"datepickerMode":"day",
"customOptions":{
},
"id":"eksb6r"
}
第二个日期组件的以下代码部分是进行验证的地方，
"validate":{
"json":{
"if":[
{
"===":[
{
"var":"input"
},
"23-May-2021"
]
},
true,
"You have an error"
]
}
错误消息在 ui 上显示为，
所以我在这里有两个问题，
- 无论选择的日期如何，该错误似乎都会显示
- 我想扩展它，以便我可以比较日期 1 和日期 2 之间的值，并且日期 2 是否应该更少显示错误消息。
似乎有一个输入自定义逻辑的选项，如下所示，
valid = (input === '23-May-2021') ? true : 'Your name must be "Joe"';
但它看起来像上面提到的问题1。有人可以指导我正确的方向。
自定义验证逻辑可以放在容器设置上，如下所示，
谢谢