DatePicker 从和到

Question

在一个表单中，我有两个 DatePicker 字段，它们是 From 和 To。在这种情况下，用户为 To 选择的值不应小于 he/she 为 From 字段选择的值。

我只是想知道是否有任何 SAPUI5 本机方法可以进行此比较并验证 DatePicker 字段？下图可以看到From的值比To大，这是错误的！在这种情况下，我需要在字段周围显示验证错误。

Answer 1

Is there any SAPUI5 native way to do this

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/odata/v4/ODataModel",
  "sap/ui/core/Core",
], async (Fragment, ODataModel, Core) => {
  "use strict";

  const definition = document.getElementById("myxmlfragment").textContent;
  const control = await Fragment.load({ definition });

  control.setModel(new ODataModel({
    serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(myservice))/",
    synchronizationMode: "None",
    operationMode: "Server",
    groupId: "$direct",
  })).placeAt("content");

  Core.getMessageManager().registerObject(control, 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>
<script id="myxmlfragment" type="text/xml">
  <VBox xmlns="sap.m"
    class="sapUiTinyMargin"
    xmlns:core="sap.ui.core"
    renderType="Bare"
    binding="{/People('russellwhyte')/Trips(0)}"
  >
    <DateRangeSelection
      core:require="{
        DateTimeOffset: 'sap/ui/model/odata/type/DateTimeOffset',
        DateInterval: 'sap/ui/model/type/DateInterval'
      }"
      placeholder="&lt;From> - &lt;To>"
      width="16rem"
      value="{
        parts: [
          {
            path: 'StartsAt',
            type: 'DateTimeOffset',
            formatOptions: { UTC: true }
          },
          {
            path: 'EndsAt',
            type: 'DateTimeOffset',
            formatOptions: { UTC: true }
          }
        ],
        type: 'DateInterval',
        formatOptions: { UTC: true },
        parameters: { $$noPatch: true }
      }"
    />
    <!-- To display values stored in the model: -->
    <ObjectStatus
      title="StartsAt value"
      text="{ path: 'StartsAt', targetType: 'any' }"
    />
    <ObjectStatus
      title="EndsAt value"
      text="{ path: 'EndsAt', targetType: 'any' }"
    />
  </VBox>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

^{注意：上面的示例使用了 sap.ui.model.odata<strong>.v4</strong> .ODataModel。同样的方法可以应用于 V2 模型，但要确保启用双向绑定，例如defaultBindingMode: "TwoWay" 在模型设置中。}

这解决了给定的问题：

用户需要选择两个日期值。 ✔️
用户应该不能选择To小于From。 ✔️
正在寻找“UI5 本机方式”来解决此问题。 ✔️

将它与 binding type: sap.ui.model.type.Date*Interval 结合使用以启用：

双向数据绑定✔️
格式选项✔️
使用标准 UI 消息进行输入验证 ✔️

与具有两个 DatePickers 的自定义实现相比，DateRangeSelection 需要：

用户点击次数减少✔️
处理日期范围的零自定义 JS 代码✔️

Answer 2

通过根据选择的日期将 change event on the "from" picker we can then use the method setMinDate() 用于 "To" 选择器，这样用户只能 select 在日期 selected 之后的日期。

在我们的 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 获取新值，并使用 setMinDate()[将其应用于 "To" 日期选择器方法并重置其值，因此用户必须 select 一个新日期。

Answer 3

假设您的 xml 视图文件中有以下 2 DatePicker 个对象：

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

现在我们必须在 onChange 事件处理程序中使用 sap.ui.model.type.Date 的约束：

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");
}

只要用户更改其中一个字段中的值，我们就会更改另一个字段中的约束。

备注：

请注意，我们不能直接将约束绑定到模型。
通过应用此解决方案，您需要在日期选择器上使用验证来查看一些验证状态文本。

DatePicker 从和到

DatePicker From and To

sapui5

date-range