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

问题描述 投票：2回答：4

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

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

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

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

我想一个解决方法是使用change（）事件并在JS中进行验证，设置valueState等，但我想了解datetimepicker在这方面可以做些什么，而不必求助于多余的JS。

我确信这必须在某个地方的文档中，但还没有找到任何结论。我觉得严格的解析应该发挥一定的作用。

我通过声明一种新的数据类型找到了this SO questionabout设置日期范围限制。我认为这可能是一个解决方案，但我仍然坚持如何设置'有效日期'输入值的约束。

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

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

maximum（期望以源模式格式呈现的dateTime）最小值（期望以源模式格式呈现的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>
sapui5
4个回答
3
投票

您可以通过处理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工作example。

编辑15:03 310117

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

3
投票
  • 当输入无效格式的值（例如“123123”）时，将触发事件parseError。
  • 当输入可以被解析但是违反了一个已定义的约束时，才会触发事件validationError。

以下是他们尝试的示例：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
  >
    <DateTimePicker id="myDTP" width="15rem"
      value="{
        path:'/myDate',
        type: 'sap.ui.model.type.DateTime',
        formatOptions: {
          style: 'medium/short'
        }
      }"
      parseError="alert('Parse error')"
      validationError="alert('Validation error')"
    />
    <ObjectAttribute title="Minimum" text="now" />
  </mvc:View>`,
  afterInit: function() {
    const dateTimeValueBinding = this.byId("myDTP").getBinding("value");
    dateTimeValueBinding.getType().setConstraints({
      minimum: new Date(),
    });
  },
  models: new JSONModel({
    myDate: new Date(),
  }),
}).then(view => {
  const msgMgr = sap.ui.getCore().getMessageManager();
  msgMgr.registerObject(view.placeAt("content"), true);
})));
<script id="sap-ui-bootstrap"
  src="https://ui5.sap.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-async="true"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-xx-waitForTheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

或者，您也可以注册控件（或整个组件）以在UI中显示错误消息，以指导用户执行操作。见UI Messages。

1
投票

您必须在数据类型声明中使用完全限定的对象名称，因为您指的是JavaScript对象而不是HTML类型的构建。如果您更改以下部分：

DateTime到sap.ui.model.type.DateTime

它会工作。请注意，如果正在使用类型，则会忽略示例中使用的valueFormat或displayFormat等属性。在这种情况下，您必须在绑定中提供这些信息。有关详细信息，请查看类型实现的documentation。

一个缩短的例子可以找到here。更多examples可以在UI5 Explored应用程序中找到，这通常是一个很好的起点。一般来说，绑定的解释可以找到here。

0
投票

如果你不想在JS中做那么多工作，我相信你可以使用validationError事件。只需在XML，validationError="functionNameHere"和JS中设置，就可以将ValueState设置为error。当值无法发送到模型时会触发validationError事件，因此您不必对格式进行任何检查，此事件发生意味着格式确实是错误的。您可以查看以下链接阅读文档。

https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.base.ManagedObject.html#event:validationError

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.