Skip to content Skip to sidebar Skip to footer
Home / Datepicker / Javascript / Jquery / Sapui5

Setting Constraints To Sap.m.datepicker

Post a Comment
How do I get my DatePicker to implement my minimum and maximum date constraint? If an unallowed date is chosen, I preferably do not even want it to trigger a change event, or at le

Solution 1:

I hope this can resolve your problem. I declare a date type outside the definition of the datepicker.

In this example maximumDate = actual date and minimumDate = actual date less 15 days:

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

Now just declare the datepicker with the date type.

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

To see this working you can add validation functions.

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

Solution 2:

Here is a working example (see this jsbin):

<!DOCTYPE html><html><head><metacharset=utf-8 /><title>Demo</title><scriptsrc="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><divid="content"></div></body></html>

You may like these posts

Post a Comment for "Setting Constraints To Sap.m.datepicker"