DatePicker From和To

Question

在一个形式，我有两个DatePicker字段是From和To。在这种情况下，用户不应该选择To的值小于他/她为From字段选择的值。

我只是想知道有没有SAPUI5本地方式来进行这种比较并验证DatePicker字段？在图像打击中，你可以看到From比To更有价值，这是错误的！在这种情况下，我需要显示字段周围的验证错误。

Answer 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" />

这两个字段以合适的格式显示日期，因为我们将类型设置为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");
}

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

笔记：

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

Answer 2

通过在“from”选择器上使用change事件，我们可以根据所选日期使用方法setMinDate()作为“To”选择器，这样用户只能在所选日期之后选择日期。

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

Answer 3

是否有任何SAPUI5本地方法来执行此操作

是的，看看Date Range Selection。

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/odata/v2/ODataModel",
], (XMLView, ODataModel) => XMLView.create({
  definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
    <App xmlns="sap.m">
      <Page showHeader="false">
        <DateRangeSelection
          binding="{/Employees(1)}"
          width="14rem"
          value="{
            parts: [
              'BirthDate',
              'HireDate'
            ],
            type: 'sap.ui.model.type.DateInterval'
          }"
        />
      </Page>
    </App>
  </mvc:View>`,
  models: new ODataModel({
    serviceUrl: [
     "https://cors-anywhere.herokuapp.com/",
     "https://services.odata.org/V2/Northwind/Northwind.svc/"
    ].join(""),
    tokenHandling: false,
    preliminaryContext: true,
    defaultBindingMode: "TwoWay"
  }),
}).then(view => {
  const messageManager = sap.ui.getCore().getMessageManager();
  messageManager.registerObject(view, true);
  view.placeAt("content");
})));

<script id="sap-ui-bootstrap"
  src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact" style="height: 100%"></body>

这解决了给定的问题：

用户需要选择两个日期值。 ✔️
用户不应该选择低于To的From。 ✔️
寻找“UI5本地方式”来解决这个问题。 ✔️

甚至有binding type: sap.ui.model.type.Date*Interval启用：

双向数据绑定✔️
格式选项✔️
输入验证✔️

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

用户点击次数减少✔️
零JS代码维护处理日期范围✔️

DatePicker From和To

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

3个回答

最新问题

DatePicker From和To

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

3个回答

最新问题

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