验证日期时间选择器的输入 [英] Validate input of datetime picker

问题描述

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

日期时间选择器控件 是一个带有弹出日期选择器的输入框.

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

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

我想一种解决方法是使用 change() 事件并在 JS 中进行验证、设置 valueState 等，但我想了解 datetimepicker 在这方面可以做什么，而不必求助于过多的 JS.

我确信这一定在某个地方的文档中，但还没有找到任何结论.我觉得 strictParsing 应该发挥一些作用.

我发现this SO question关于通过声明设置日期范围限制新的数据类型.我认为这可能是一个解决方案，但我对如何为有效日期"输入值设置约束感到困惑.

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

<块引用>

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

maximum(期望以源模式格式显示的日期时间)最小值(期望以源模式格式显示的日期时间)

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

谁能指出我正确的方向?

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

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

//JSON 示例数据var classData = {className: "Coding 101", id: 800, startdate: "2017-12-31T23:59:59.000"}//将 JSON 日期转换为 JS 日期对象和格式，用于 UI5 消费classData.startdateraw = 新日期(classData.startdate)classData.startdatefmt = moment(classData.startdateraw).format('YYYY-MM-DD-HH-mm-ss')sap.ui.getCore().attachInit(function() {严格使用"；sap.ui.controller("MyController", {onInit:函数(){//创建 JSON 模型实例var oModel = new sap.ui.model.json.JSONModel();//设置模型数据oModel.setData(classData);//将模型设置为核心.sap.ui.getCore().setModel(oModel);//启用验证！！sap.ui.getCore().getMessageManager().registerObject(this.getView(), true);this.getView().byId("startDate").attachValidationError(function(){alert('验证错误触发 - 万岁')})},valError : 函数(){console.log("有一个验证错误")}});sap.ui.xmlview({视图内容:jQuery("#myView").html()}).placeAt("内容");});

<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" 数据-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:内容><Label id="lblStartDate" text="Start" design="Bold" labelFor="startDate"/><日期时间选择器id="开始日期"placeholder="输入一个疯狂的日期和时间，例如 23/01/12345"valueFormat="yyyy-MM-dd-HH-mm-ss"验证错误=valError"值="{路径:'/startdateraw'，类型:'sap.ui.model.type.DateTime',严格解析:'真'}"/></f:内容></f:SimpleForm></mvc:查看><div id="content"></div>

解决方案

您可以通过处理 sap.m.DateTimePicker:

handleChange : function(oEvent){var bValid = oEvent.getParameter("valid");如果(！bValid){sap.m.MessageToast.show("输入的日期范围无效");返回;}}

Jsbin 工作 示例.

编辑 15:03 310117

sap.m.DateTimePicker的Change事件借用事件 来自类 sap.m.DatePicker.

How to register validationError callback for datetimepicker in XML view and how to get this event fired for invalid date input.

The datetimepicker control is an input box with a popup date picker.

The user can type directly into the input or use the date picked to select a date. I can add sophisticated validation to the datetime value but I am trying to simply trigger the validationError event when the user types an invalid date into the box, for example "1010101010010101010101010" or "32/15/2019".

Ideally I am looking for a constraint that tests for a valid date value and triggers the validationError() function if needed.

I guess a workaround is to use the change() event and do the validation in JS, set the valueState etc, but I want to understand what the datetimepicker can do in this regard without having to resort to excess JS.

I am convinced this must be in the docs somewhere but have not yet found anything conclusive. I feel strictParsing should play some part.

I found this SO questionabout setting date range constraints via declaring a new data type. I thought this might be a solution but I am stuck with how to set the constraint for 'a valid date' input value.

Reading the SAPUI5 docs about sap.ui.model.type.DateTime it mentions

The DateTime type supports the following validation constraints:

maximum (expects an dateTime presented in the source-pattern format) minimum (expects an dateTime presented in the source-pattern format)

which gives no pointers over how to do a straight date validity or format check.

Can anyone point me in the right direction?

EDIT - on suggestion of @Matbtt and reference to docs I altered the type to the string literal sap.ui.model.type.DateTime. However the snippet then produced no output. I traced this to the binding to the model where I was binding to a string. When changed to bind to a JS date object this was fixed.

EDIT - on suggestion of @Developer added validationError callback but does not appear to work. See snippet.

// 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>

解决方案

You can do it by handling change event of 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 working example.

EDITED 15:03 310117

Change event of sap.m.DateTimePicker is borrowed event from class sap.m.DatePicker.

这篇关于验证日期时间选择器的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！