Задаване на ограничения за 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

Надявам се, че това може да разреши проблема ви. Декларирам тип дата извън дефиницията на инструмента за избор на дата.

В този пример 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");
 });
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