datetimepicker에 대한 validationError 콜백을 XML보기에 등록하는 방법과 유효하지 않은 날짜 입력으로이 이벤트를 발생시키는 방법.datetime picker의 입력 유효성 확인
datetimepicker control은 팝업 날짜 선택 도구가있는 입력 상자입니다.
사용자는 입력에 직접 입력하거나 선택한 날짜를 사용하여 날짜를 선택할 수 있습니다. 정교한 유효성 검사를 datetime 값에 추가 할 수 있지만 "1010101010010101010101010"또는 "32/15/2019"와 같이 사용자가 유효하지 않은 날짜를 상자에 입력 할 때 validationError 이벤트를 트리거하려고합니다.
이상적으로 나는 유효한 날짜 값을 테스트하고 필요에 따라 validationError() 함수를 트리거하는 제약 조건을 찾고 있습니다.
나는 change() 이벤트를 사용하고 JS의 유효성 검사를 수행하고 valueState 등을 설정하는 것이 좋습니다.하지만 datetimepicker가 초과 JS를 사용하지 않고이 작업을 수행 할 수 있는지 알고 싶습니다.
나는이 문서가 어딘가에 있어야한다고 확신하지만 아직 결정적인 것을 찾지 못했다. 나는 엄격한 파싱이 어떤 역할을해야한다고 생각한다.
새로운 데이터 유형 선언을 통해 날짜 범위 제약 조건 설정에 대해 this SO question이 발견되었습니다. 나는 이것이 해결책 일 줄 알았지 만, '유효한 날짜'입력 값에 대한 제약 조건을 설정하는 방법에 열중하고 있습니다. 이
날짜 시간 유형은 다음과 같은 검증 제약 지원 언급 sap.ui.model.type.DateTime에 대해
SAPUI5의 문서를 읽기 :
최대 최소 (AN dateTime에 기대 (소스 패턴 형식으로 제시된 dateTime으로 기대) 소스 패턴 형식으로 표시)
정확한 날짜 유효성 검사 또는 형식 검사 방법에 대한 지침이 없습니다.
누구나 올바른 방향으로 나를 가리킬 수 있습니까?
EDIT - @Matbtt 및 docs에 대한 제안에 따라 유형을 문자열 리터럴 sap.ui.model.type.DateTime으로 변경했습니다. 그러나 스 니펫은 결과물을 출력하지 못했습니다. 저는 이것을 문자열에 묶는 모델의 바인딩으로 추적했습니다. JS 날짜 개체에 바인딩되도록 변경되면이 문제가 해결되었습니다.
EDIT - @ 개발자가 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="{
\t path: '/startdateraw',
type: 'sap.ui.model.type.DateTime',
strictParsing: 'true'
}"
/>
</f:content>
</f:SimpleForm>
</mvc:View>
</script>
<div id="content"></div>
유효하지 않은 입력의 경우 처리기를 'parseError' 이벤트에 연결해야합니다. UI 메시지 생성을 포함하는 [내 답변] (https://stackoverflow.com/a/48482544/5846045)을 추가했습니다. – boghyon