Как зарегистрировать validationError callback для datetimepicker в представлении XML и как получить это событие для недействительного ввода даты.Подтвердить ввод команды выбора даты и времени
datetimepicker control это поле ввода с всплывающим выбором даты.
Пользователь может ввести непосредственно во вход или использовать выбранную дату, чтобы выбрать дату. Я могу добавить сложную проверку значения datetime, но я пытаюсь просто вызвать событие validationError, когда пользователь вводит неверную дату в поле, например «101010101001010101010101010» или «32/15/2019».
В идеале я ищу ограничение, которое проверяет допустимое значение даты и запускает функцию validationError(), если это необходимо.
Я думаю, что обходным путем является использование события change() и проверка в JS, установка значенияState и т. Д., Но я хочу понять, что может сделать datetimepicker в этом отношении, не прибегая к избыточному JS.
Я убежден, что это должно быть где-то в документах, но еще не найдено ничего убедительного. Я чувствую, что строгая игра должна сыграть определенную роль.
Я нашел this SO question о ограничении диапазона дат даты, объявив новый тип данных. Я думал, что это может быть решением, но я застрял в том, как установить ограничение для входного значения «действительная дата».
Чтение SAPUI5 документов о sap.ui.model.type.DateTime он упоминает
Тип DateTime поддерживает следующие ограничения валидации:
максимума (ожидает DateTime представлены в формате исходного шаблона) минимума (ожидает DateTime представленный в формате исходного шаблона)
, который не дает никаких указаний относительно того, как проводить прямую проверку даты или формат.
Может ли кто-нибудь указать мне правильное направление?
EDIT - по предложению @Matbtt и ссылки на документы я изменил тип на строковый литерал sap.ui.model.type.DateTime. Однако после этого фрагмент не выдал никакого результата. Я проследил это с привязкой к модели, где я привязывался к строке. При изменении привязки к объекту даты JS это было исправлено.
EDIT - по предложению @Developer добавил validationError callback, но не работает. См. Фрагмент.
// 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="{
\t path: '/startdateraw',
type: 'sap.ui.model.type.DateTime',
strictParsing: 'true'
}"
/>
</f:content>
</f:SimpleForm>
</mvc:View>
</script>
<div id="content"></div>
Для недействительных входов вам необходимо привязать обработчик к событию 'parseError'. Я добавил свой [ответ ниже] (https://stackoverflow.com/a/48482544/5846045), который включает в себя создание сообщений пользовательского интерфейса. – boghyon