SAP UI5 Date Picker With Min and Max dates

SAP  UI5 Date Picker With Min and Max dates

View1.controller:- 

sap.ui.define([

"sap/ui/core/mvc/Controller"

], function(Controller) {

"use strict";

return Controller.extend("DemoDatePicker.controller.View1", {

onInit: function() {

var oDate = this.getView().byId("DP"),

oMinDate = new Date(),

oMaxDate = new Date();

oMaxDate.setDate(oMaxDate.getDate() + 30);

oDate.setMinDate(oMinDate);

oDate.setMaxDate(oMaxDate);

},

onChange: function() {

var oDate=this.getView().byId("DP"),

oMinDate = new Date(),

oMaxDate = new Date();

oMaxDate.setDate(oMaxDate.getDate()+30);

oDate.setMinDate(oMinDate);

oDate.setMaxDate(oMaxDate);

}

});

});

View1.xml:-

<mvc:View controllerName="DemoDatePicker.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"

displayBlock="true" xmlns="sap.m" xmlns:core="sap.ui.core">

<App>

<pages>

<Page title="{i18n>title}">

<content>

<Label text="DatePicker"/>

<DatePicker id="DP" change="onChange" />

</content>

</Page>

</pages>

</App>

</mvc:View>

Click on the below Image for Detail Explanation Video