В форме у меня есть два поля DatePicker: From и To. В этом случае пользователь не должен иметь возможность выбрать значение для To меньше, чем то, которое он выбрал для поля From.
Я просто хотел знать, есть ли какой-либо собственный способ SAPUI5 для этого сравнения и проверки полей DatePicker? На изображении видно, что From имеет большее значение, чем To, что неверно! В этом случае мне нужно показать ошибку проверки вокруг полей.
DateRangeSelection. См. stackoverflow.com/a/53524645/5846045. 27.08.2019 Предположим, у вас есть следующие 2 объекта DatePicker в файле представления xml:
<m:DatePicker id="__input_validFrom"
value="{path: 'ZValidFrom', type : 'sap.ui.model.type.Date'}"
fieldGroupIds="fieldGroup1"
change="handleValidFromChange"/>
<m:DatePicker id="__input_validTo"
value="{path: 'ZValidTo', type : 'sap.ui.model.type.Date'}"
fieldGroupIds="fieldGroup1"
change="handleValidToChange" />
Эти 2 поля показывают дату в подходящем формате, поскольку мы устанавливаем тип sap.ui.model.type.Date.
Теперь нам нужно поиграть с ограничениями sap.ui.model.type.Date в обработчике событий onChange:
handleValidFromChange: function (oEvent) {
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sToDatePicker = "__input_validTo",
oToDatePicker = this.byId(sToDatePicker);
oToDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null, {
minimum: new Date(sValue)
}), "string");
},
handleValidToChange: function (oEvent) {
var oDatePicker = oEvent.getSource(),
sValue = oDatePicker.getValue(),
sFromDatePicker = "__input_validFrom",
oFromDatePicker = this.byId(sFromDatePicker);
oFromDatePicker.getBinding("value").setType(new sap.ui.model.type.Date(null, {
maximum: new Date(sValue)
}), "string");
}
Как только пользователь изменяет значение в одном из полей, мы меняем ограничения в другом поле.
Заметки:
Используя событие change в " из" средства выбора мы можем использовать метод setMinDate() для средства выбора «Кому» на основе выбранной даты, поэтому пользователь может выбирать даты только после выбранной даты.
В нашем XML-представлении мы можем иметь как sap.m.DatePicker:
<DatePicker id="DP1" placeholder="Enter Date ..." change="handleChange"/>
<DatePicker id="DP2" placeholder="Enter Date ..."/>
И в нашем контроллере мы можем применить логику:
handleChange: function(oControlEvent) {
//get date picked from first picker
var sDatePicked = oControlEvent.getSource().getDateValue();
//set minimum date on second picker
this.getView().byId("DP2").setMinDate(sDatePicked).setValue();
}
Применив этот метод, мы теперь можем получить новое значение из первого sap.m.DatePicker< /a> и примените его к средству выбора даты «Кому», используя setMinDate() и сбросьте его значение, чтобы пользователь мог выбрать новую дату.
Есть ли собственный способ SAPUI5 сделать это?
Да, взгляните на Выбор диапазона дат.
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/Core",
"sap/ui/model/odata/v4/ODataModel",
"sap/ui/core/Fragment",
], async (Core, ODataModel, Fragment) => {
"use strict";
const control = await Fragment.load({
definition: `<DateRangeSelection xmlns="sap.m" xmlns:core="sap.ui.core"
core:require="{ DateInterval: 'sap/ui/model/type/DateInterval' }"
placeholder="<From> - <To>"
width="16rem"
binding="{/People('russellwhyte')/Trips(0)}"
value="{
parts: [ 'StartsAt', 'EndsAt' ],
type: 'DateInterval'
}"
/>`,
});
control.setModel(new ODataModel({
serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(qmr0hmopno13zauulilcogn3))/",
synchronizationMode: "None",
operationMode: "Server",
groupId: "$direct",
}));
Core.getMessageManager().registerObject(control.placeAt("content"), true);
});<script defer id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified"
data-sap-ui-oninit="onUI5Init"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-async="true"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>Примечание. в приведенном выше примере используется sap.ui.model.odata.v4.ODataModel. Тот же подход можно применить к модели V2, но затем обязательно включите двустороннюю привязку, например. defaultBindingMode: "TwoWay" в настройках модели.
Это решает данную проблему:
To меньше From. ✔️Существует даже тип привязки: sap.ui.model.type.Date*Interval, чтобы включить:
По сравнению со специальной реализацией с двумя DatePickers, DateRangeSelection требует:
