验证日期时间选择器的输入

Question

如何在 XML 视图中为 datetimepicker 注册 validationError 回调，以及如何因无效日期输入而触发此事件。

datetimepicker 控件是一个带有弹出日期选择器的输入框。

用户可以直接在输入中键入或使用所选日期来选择日期。我可以向日期时间值添加复杂的验证，但当用户在框中输入无效日期（例如“1010101010010101010101010”或“32/15/2019”时，我尝试简单地触发validationError事件）。

理想情况下，我正在寻找一个约束来测试有效的日期值并在需要时触发validationError()函数。

我想解决方法是使用change()事件并在JS中进行验证，设置valueState等，但我想了解datetimepicker在这方面可以做什么，而不必诉诸多余的JS。

我确信这一定在文档中的某个地方，但尚未找到任何结论性的东西。我觉得 strictParsing 应该发挥一些作用。

我发现这个关于通过声明新数据类型设置日期范围约束的问题。我认为这可能是一个解决方案，但我一直不知道如何设置“有效日期”输入值的约束。

阅读有关sap.ui.model.type.DateTime的 SAPUI5 文档，其中提到

DateTime 类型支持以下验证约束：

最大值（期望以源模式格式呈现的日期时间） 最小值（期望以源模式格式呈现的日期时间）

它没有给出如何进行直接日期有效性或格式检查的指示。

有人能指出我正确的方向吗？

编辑 - 根据 @Matbtt 的建议和对文档的引用，我将类型更改为字符串文字sap.ui.model.type.DateTime。然而，该片段没有产生任何输出。我将其追溯到绑定到字符串的模型的绑定。当更改为绑定到 JS 日期对象时，此问题得到修复。

编辑-根据@Developer的建议添加了validationError回调，但似乎不起作用。请参阅片段。

// JSON sample data
var classData = {className: "Coding 101", id: 800, startdate: "2017-12-31T23:59:59.000"}

// convert JSON date to JS date object and format via moment for UI5 consumption
classData.startdateraw = new Date(classData.startdate)
classData.startdatefmt = moment(classData.startdateraw).format('YYYY-MM-DD-HH-mm-ss') 

sap.ui.getCore().attachInit(function() {
   "use strict";
   sap.ui.controller("MyController", {
     onInit: function() {

    // create JSON model instance
    var oModel = new sap.ui.model.json.JSONModel();

    // set the data for the model
    oModel.setData(classData);
   
    // set model to core.
    sap.ui.getCore().setModel(oModel);

    // Enable validation !!
    sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);
     
    
     this.getView().byId("startDate").attachValidationError(function(){
        
        alert('Validation error fires - hoorah')
        
      }) 
       
     },
     valError : function(){
       console.log("There was a validation error")
      }
   });
   sap.ui.xmlview({
     viewContent: jQuery("#myView").html()
   }).placeAt("content");
  
  });

<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/1.7.2/moment.min.js"></script>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>

<script id="myView" type="ui5/xmlview">
  <mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.commons.layout" xmlns:f="sap.ui.layout.form">


    <f:SimpleForm id="EditForm" maxContainerCols="2" editable="true" width="25rem" layout="ResponsiveGridLayout" path="{}">
      <f:content>


        <Label id="lblStartDate" text="Start" design="Bold" labelFor="startDate" />
        <DateTimePicker 
            id="startDate" 
            placeholder="Enter a crazy date and time, e.g. 23/01/12345" 
            valueFormat="yyyy-MM-dd-HH-mm-ss" 
            validationError="valError"
            value="{
            	path: '/startdateraw',
                type: 'sap.ui.model.type.DateTime',  
                strictParsing: 'true'
              }" 
              />


      </f:content>
    </f:SimpleForm>

  </mvc:View>
</script>

<div id="content"></div>

Answer 1

您可以通过处理sap.m.DateTimePicker的更改事件来完成此操作：

handleChange : function(oEvent){
   var bValid   = oEvent.getParameter("valid");

   if(!bValid){             
      sap.m.MessageToast.show("Entered date range isn't valid");
      return;
   }
}

Jsbin 工作示例。

已编辑 15:03 310117

sap.m.DateTimePicker 的更改事件是从类 sap.m.DatePicker借用的事件。