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 least revert the date to one that is allowed. I use 2-way binding, so if I change the date, the date in my model also changes.
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"}
});
I also tried some variations of implementing sap.ui.model.type.Date(oFormatOptions?, oConstraints?), but it does not work:
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"}
}
})
}
});
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 = 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
});
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");
});
Here is a working example (see this 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>
