如何防止选择早于另一个输入中的日期？

问题描述 投票：0回答：3

在表单中，我有两个 

DatePicker
字段，分别是 
From
和 
To
。在这种情况下，用户为 
To
选择的值不应小于他/她为 
From
字段选择的值。

我只是想知道是否有 SAPUI5 原生方法来进行此比较并验证 

DatePicker
字段？在下图中，您可以看到 
From
的值大于 
To
，这是错误的！在这种情况下，我需要显示字段周围的验证错误。

sapui5 date-range
3个回答
2
投票

是否有 SAPUI5 原生方法可以做到这一点

是的，看看日期范围选择。

样品

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/odata/v4/ODataModel",
  "sap/ui/core/Messaging",
], async (XMLView, ODataModel, Messaging) => {
  "use strict";
  const control = await XMLView.create({
    definition: document.getElementById("myxmlfragment").textContent,
    models: new ODataModel({
      serviceUrl: "https://services.odata.org/TripPinRESTierService/(S(myservice))/",
      autoExpandSelect: true,
    }),
  });
  Messaging.registerObject(control, true);
  control.placeAt("content");
});
<script defer id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.layout,sap.ui.unified"
  data-sap-ui-on-init="onUI5Init"
  data-sap-ui-async="true"
  data-sap-ui-compat-version="edge"
  data-sap-ui-exclude-jquery-compat="true"
  data-sap-ui-xx-wait-for-theme="init"
></script>
<script id="myxmlfragment" type="text/xml">
  <mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:layout="sap.ui.layout"
    xmlns:core="sap.ui.core"
    core:require="{
      ODataV4DateTimeOffset: 'sap/ui/model/odata/type/DateTimeOffset',
      DateInterval: 'sap/ui/model/type/DateInterval'
    }"
    height="100%"
  >
    <App autoFocus="false">
      <Page showHeader="false" class="sapUiTinyMarginBegin">
        <layout:VerticalLayout binding="{/People('russellwhyte')/Trips(0)}">
          <Text text="{ path: 'StartsAt', targetType: 'any' }" />
          <Text text="{ path: 'EndsAt', targetType: 'any' }" />
          <DateRangeSelection
            placeholder="&lt;From> - &lt;To>"
            width="16rem"
            value="{
              parts: [
                {
                  path: 'StartsAt',
                  formatOptions: { UTC: true },
                  type: 'ODataV4DateTimeOffset'
                },
                {
                  path: 'EndsAt',
                  formatOptions: { UTC: true },
                  type: 'ODataV4DateTimeOffset'
                }
              ],
              type: 'DateInterval',
              formatOptions: { UTC: true },
              parameters: { $$noPatch: true }
            }"
          />
        </layout:VerticalLayout>
      </Page>
    </App>
  </mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

注意：以上示例使用了

sap.ui.model.odata.v4.ODataModel
。相同的方法可以应用于 V2 模型，但是，该模型需要显式启用双向绑定，例如模型设置中的
defaultBindingMode: "TwoWay"
。此外，V2 中的绑定定义也有所不同。请查看文档主题“日期、时间、时间戳和时区”并相应地调整数据设置。上面的示例使用了 
Type="Edm.DateTimeOffset"
的实体属性，这并不适合 
DateRangeSelection
控件。属性类型应该是 OData V4 中的 
"Edm.Date"
或 V2 中的 
"Edm.DateTime"
和 
sap:display-format="Date"
。

结果

这解决了给定的问题：

  • 用户需要选择两个日期值。 ✔️
  • 用户应该不能能够选择小于
    To
    的
    From
    。 ✔️
  • 寻找“UI5原生方式”来解决这个问题。 ✔️

将其与 绑定类型结合使用： 

sap.ui.model.type.Date*Interval
以启用：

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

与 JavaScript 中带有两个 DatePicker

 的自定义实现
相比，
DateRangeSelection
控件允许：

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

请参阅文档主题 “日期、时间、时间戳和时区”（IMO 必读）。

1
投票

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

现在我们必须在 

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

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

备注：

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

通过在“从”选择器上使用 

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”日期选择器，并重置其值，以便用户必须选择一个新日期。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.