javascript - 为 sap.m.DatePicker 设置约束

Question

如何让我的 DatePicker 实现我的最小和最大日期限制？

如果选择了一个不允许的日期，我什至不希望它触发更改事件，或者至少将日期恢复为允许的日期。我使用双向绑定(bind)，所以如果我更改日期，我模型中的日期也会更改。

   var oData = {
       "minimumConstraint" : "2010-01-01",
       "maximumConstraint" : "2020-01-01",
       "displayDate" : "2015-01-01"
     };

var oModel = new sap.ui.model.json.JSONModel(oData);

sap.ui.getCore().setModel(oModel);

var oDatePicker = new sap.m.DatePicker({
  displayFormat: "dd-MM-yyyy",
  valueFormat: "yyyy-MM-dd",
  value: {path: "displayDate"}
});

我还尝试了一些实现 sap.ui.model.type.Date(oFormatOptions?, oConstraints?) 的变体，但它不起作用:

var oDatePicker = new sap.m.DatePicker({
  displayFormat: "dd-MM-yyyy",
  valueFormat: "yyyy-MM-dd",
  value: {path: "displayDate",
          type: new sap.ui.model.type.Date({
                constraints: {
                      minimum: { path: "minimumConstraint"},
                      maximum: { path: "maximumConstraint"}
                            }
                 })
          }
});

Answer 1

我希望这能解决你的问题。我在日期选择器的定义之外声明了一个日期类型。

在此示例中，maximumDate = 实际日期和 minimumDate = 实际日期减去 15 天:

var maximumDate = new Date();
var minimumDate = new Date();
minimumDate = minimumDate.setDate(minimumDate.getDate()-15);
var dateType = new sap.ui.model.type.Date({
        pattern: "dd/MM/yyyy",
        strictParsing: true
    }, {
        maximum: maximumDate,
        minimum: minimumDate
    });

现在只需声明日期类型的日期选择器即可。

var oDatePicker = new sap.m.DatePicker(this.createId("datePickerTest"), {
        type: "Date",
        width: '200px',
        value: {
            path:"/dateValue", 
            type: dateType
        },
        placeholder: "Date"
    });

要查看此工作，您可以添加验证函数。

oDatePicker.attachValidationError(function(oEvent) {
        var oElement = oEvent.getParameter("element");
        oElement.setValueState("Error");
    });
oDatePicker.attachValidationSuccess(function(oEvent) {
    var oElement = oEvent.getParameter("element");
    oElement.setTooltip("");
    oElement.setValueState("None");
 });