日期选择器从和到答案

【问题标题】：DatePicker From and To日期选择器从和到
【发布时间】：2018-11-28 16:14:53
【问题描述】：

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

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

【问题讨论】：

对于选择日期范围的典型用例，UI5 提供了DateRangeSelection。见stackoverflow.com/a/53524645/5846045

标签： sapui5 date-range

【解决方案1】：

是否有任何 SAPUI5 原生方式来做到这一点

是的，看看 Date Range Selection。

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 消息进行输入验证✔️

与使用两个 DatePicker 的自定义实现相比，DateRangeSelection 需要：

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

【讨论】：

【解决方案2】：

假设您的 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" />

当我们将类型设置为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");
}

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

注意事项：

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

【讨论】：

【解决方案3】：

通过在“发件人”选择器上使用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 获取新值，并使用 setMinDate() 方法将其应用于“To”日期选择器并重置其值，以便用户必须选择一个新日期.

【讨论】：