Установка ограничений для sap.m.DatePicker

Как заставить мой 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"}
                            }
                 })
          }
});

javascript datepicker jquery sapui5
person Daniël Camps    schedule 11.03.2015    source источник
comment
Единственное быстрое и грязное решение, которое я когда-то придумал, - это выполнить проверку в событии и установить его на предыдущую дату, если нарушаются ограничения. Недостаток, конечно, в том, что всплывающее окно закрыто, поэтому я понимаю, что вам нужно ловить перед событием... Тоже хотел бы узнать решение!   -  person Qualiture    schedule 11.03.2015

Ответы (2)


arrow_upward
1
arrow_downward

Я надеюсь, что это может решить вашу проблему. Я объявляю тип даты вне определения средства выбора даты.

В этом примере максимальная дата = фактическая дата и минимальная дата = фактическая дата меньше 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");
 });
person Alejandro Oyarzún    schedule 25.08.2015

arrow_upward
1
arrow_downward

Вот рабочий пример (см. этот 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>
person Nabi    schedule 25.08.2015