如何在XML视图中为datetimepicker注册validationError回调,以及如何为无效日期输入触发此事件 .
datetimepicker control是一个带弹出日期选择器的输入框 .
用户可以直接输入输入或使用选择的日期来选择日期 . 我可以为日期时间值添加复杂的验证,但是我试图在用户在框中键入无效日期时触发validationError事件,例如“1010101010010101010101010”或“32/15/2019” .
理想情况下,我正在寻找一个测试有效日期值的约束,并在需要时触发validationError()函数 .
我想一个解决方法是使用change()事件并在JS中进行验证,设置valueState等,但我想了解datetimepicker在这方面可以做些什么,而不必求助于多余的JS .
我确信这必须在某个地方的文档中,但还没有找到任何结论 . 我觉得严格的解析应该发挥一定的作用 .
我通过声明一个新的数据类型找到了关于设置日期范围限制的this SO question . 我认为这可能是一个解决方案,但我仍然坚持如何设置'a valid date'输入值的约束 .
阅读关于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>
4 回答
您可以通过处理sap.m.DateTimePicker的更改事件来执行此操作:
Jsbin工作example .
编辑15:03 310117
sap.m.DateTimePicker的更改事件从类sap.m.DatePicker借用event .
您必须在数据类型声明中使用完全限定的对象名称,因为您指的是JavaScript对象而不是HTML类型的构建 . 如果您更改以下部分:
DateTime
至sap.ui.model.type.DateTime
它会工作 . 请注意,如果正在使用类型,则会忽略示例中使用的
valueFormat
或displayFormat
等属性 . 在这种情况下,您必须在绑定中提供这些信息 . 有关详细信息,请查看类型实现的documentation .可以找到缩短的示例here . 更多examples可以在UI5 Explored应用程序中找到,这通常是一个很好的起点 . 一般可以找到对绑定的解释here .
如果输入了无效格式的值(例如"123123"),则会触发事件parseError .
当可以解析输入但违反其中一个已定义的约束 only then 时,会触发事件validationError .
以下是他们尝试的示例:
或者,您也可以注册控件(或整个组件)以在UI中显示错误消息,以指导用户执行操作 . 见UI Messages .
如果你不想在JS中做那么多工作,我相信你可以使用
validationError
事件 . 只需在您的XML中设置validationError="functionNameHere"
,在JS中就可以将ValueState设置为error . 如果值必须对格式化进行任何检查,则会触发validationError
事件,此事件发生意味着格式确实是错误的 . 您可以查看以下链接阅读文档 .https://sapui5.hana.ondemand.com/#docs/api/symbols/sap.ui.base.ManagedObject.html#event:validationError