日期选择器从和到 [英] DatePicker From and To

问题描述

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

In a form, I have two DatePicker fields which are From and To. In this case user should not be able to choose a value for To less than what he/she choose for the From field.

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

I just wanted to know is there any SAPUI5 native way to do this comparison and validate the DatePicker fields? In the image blow, you can see that the From has a greater value than the To, which is wrong! In this case, I need to show the validation error around the fields.

推荐答案

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

Assume you have the following 2 DatePicker objects in your xml view file:

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

These 2 fields show the date in a suitable format as we set the type to sap.ui.model.type.Date.

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

Now we have to play with constraints of the sap.ui.model.type.Date in the onChange event handler:

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

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

As soon as user change value in one of fields we change the constraints in the other field.

注意事项:

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

这篇关于日期选择器从和到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！