json - 容器上日期控制器的自定义验证逻辑

Question

我们使用允许构建自定义 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。有人可以指导我正确的方向。

自定义验证逻辑可以放在容器设置上，如下所示，

谢谢

json - 容器上日期控制器的自定义验证逻辑

0 回答 0

Related

Reference