Question

如何让我的DatePicker实现我的最小和最大日期约束？

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

   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

我希望这可以解决您的问题。我在datepicker的定义之外声明了一个日期类型。

在此示例中，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");
 });

Answer 2

以下是一个工作示例（请参阅此jsbin）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Demo</title>

    <script src="https://openui5beta.hana.ondemand.com/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m"
            data-sap-ui-preload="sync">
            </script>

    <script>

      var oData = {
         minimumConstraint : "2015-08-01",
         maximumConstraint : "2015-08-31",
         displayDate : "2015-08-10"
      };

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

      var oDatePicker = new sap.m.DatePicker({
        width: '200px',
        value: {
            path:"/displayDate",
            type: new sap.ui.model.type.Date({
                pattern: "yyyy-MM-dd",
                source: {
                    pattern: "yyyy-MM-dd"
                },
                strictParsing: true
              }, {
                maximum: oModel.getProperty("/maximumConstraint"),
                minimum: oModel.getProperty("/minimumConstraint")
              })
        },
        placeholder: "Date"
      });

      oDatePicker.attachValidationError(function(oEvent) {
        var oElement = oEvent.getParameter("element");
        var sMinDate = oModel.getProperty("/minimumConstraint");
        var sMaxDate = oModel.getProperty("/maximumConstraint");
        oElement.setValueState("Error");
        oElement.setValueStateText("Enter date between " + sMinDate + " and " + sMaxDate);
      });
      oDatePicker.attachValidationSuccess(function(oEvent) {
        var oElement = oEvent.getParameter("element");
        oElement.setValueState("None");
        oElement.setValueStateText(null);
      });

      oDatePicker.placeAt("content");

    </script>

  </head>

  <body>
    <div id="content"></div>
  </body>
</html>

将约束设置为sap.m.DatePicker

2 个答案: