Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
[FEATURE] sap.m.DatePicker: add min and max date
Change-Id: Ia2cf598bcee269cbd709e9e0dd0cc823d4d4ae22
  • Loading branch information
UserAbcd1234 committed Feb 23, 2016
1 parent 252676b commit 999d89a
Show file tree
Hide file tree
Showing 11 changed files with 471 additions and 115 deletions.
149 changes: 142 additions & 7 deletions src/sap.m/src/sap/m/DatePicker.js
Expand Up @@ -102,7 +102,25 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
* If not set, the dates are only displayed in the primary calendar type
* @since 1.34.1
*/
secondaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance", defaultValue : null}
secondaryCalendarType : {type : "sap.ui.core.CalendarType", group : "Appearance", defaultValue : null},

/**
* Minimum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
*
* <b>Note:</b> If the <code>minDate</code> is set to be after the <code>maxDate</code>,
* the <code>maxDate</code> and the <code>minDate</code> are switched before rendering.
* @since 1.38.0
*/
minDate : {type : "object", group : "Misc", defaultValue : null},

/**
* Maximum date that can be shown and selected in the <code>DatePicker</code>. This must be a JavaScript date object.
*
* <b>Note:</b> If the <code>maxDate</code> is set to be before the <code>minDate</code>,
* the <code>maxDate</code> and the <code>minDate</code> are switched before rendering.
* @since 1.38.0
*/
maxDate : {type : "object", group : "Misc", defaultValue : null}

}
}});
Expand Down Expand Up @@ -158,6 +176,14 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa

};

DatePicker.prototype.onBeforeRendering = function() {

InputBase.prototype.onBeforeRendering.apply(this, arguments);

this._checkMinMaxDate();

};

/**
* Defines the width of the DatePicker. Default value is 100%
*
Expand Down Expand Up @@ -327,10 +353,12 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
if (!oDate || oDate.getTime() < this._oMinDate.getTime() || oDate.getTime() > this._oMaxDate.getTime()) {
this._bValid = false;
jQuery.sap.log.warning("Value can not be converted to a valid date", this);
this._oWantedDate = oDate;
}
}
if (this._bValid) {
this.setProperty("dateValue", oDate, true); // no rerendering
this._oWantedDate = undefined;
}

// do not call InputBase.setValue because the displayed value and the output value might have different pattern
Expand Down Expand Up @@ -367,10 +395,12 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
if (oDate && (oDate.getTime() < this._oMinDate.getTime() || oDate.getTime() > this._oMaxDate.getTime())) {
this._bValid = false;
jQuery.sap.assert(this._bValid, "Date must be in valid range");
this._oWantedDate = oDate;
oDate = undefined; // don't use wrong date to determine sValue
}else {
this._bValid = true;
this.setProperty("dateValue", oDate, true); // no rerendering
this._oWantedDate = undefined;
}

// convert date object to value
Expand All @@ -397,6 +427,104 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa

};

DatePicker.prototype.setMinDate = function(oDate) {

if (oDate && !(oDate instanceof Date)) {
throw new Error("Date must be a JavaScript date object; " + this);
}

if (jQuery.sap.equal(this.getMinDate(), oDate)) {
return this;
}

if (oDate) {
var iYear = oDate.getFullYear();
if (iYear < 1 || iYear > 9999) {
throw new Error("Date must be between 0001-01-01 and 9999-12-31; " + this);
}

this._oMinDate = new Date(oDate);
var oDateValue = this.getDateValue();
if (oDateValue && oDateValue.getTime() < oDate.getTime()) {
jQuery.sap.log.warning("DateValue not in valid date -> changed to minDate", this);
this.setDateValue(new Date(oDate));
}
} else {
this._oMinDate = new Date(1, 0, 1);
this._oMinDate.setFullYear(1); // otherwise year 1 will be converted to year 1901
}

// re-render because order of parameter changes not clear -> check onBeforeRendering
this.setProperty("minDate", oDate, false);

if (this._oCalendar) {
this._oCalendar.setMinDate(oDate);
}

return this;

};

DatePicker.prototype.setMaxDate = function(oDate) {

if (oDate && !(oDate instanceof Date)) {
throw new Error("Date must be a JavaScript date object; " + this);
}

if (jQuery.sap.equal(this.getMaxDate(), oDate)) {
return this;
}

if (oDate) {
var iYear = oDate.getFullYear();
if (iYear < 1 || iYear > 9999) {
throw new Error("Date must be between 0001-01-01 and 9999-12-31; " + this);
}

this._oMaxDate = new Date(oDate);
var oDateValue = this.getDateValue();
if (oDateValue && oDateValue.getTime() > oDate.getTime()) {
jQuery.sap.log.warning("DateValue not in valid date -> changed to maxDate", this);
this.setDateValue(new Date(oDate));
}
} else {
this._oMaxDate = new Date(9999, 11, 31, 23, 59, 59, 99);
}

// re-render because order of parameter changes not clear -> check onBeforeRendering
this.setProperty("maxDate", oDate, false);

if (this._oCalendar) {
this._oCalendar.setMaxDate(oDate);
}

return this;

};

DatePicker.prototype._checkMinMaxDate = function() {

if (this._oMinDate.getTime() > this._oMaxDate.getTime()) {
jQuery.sap.log.warning("minDate > MaxDate -> dates switched", this);
var oMaxDate = new Date(this._oMinDate);
var oMinDate = new Date(this._oMaxDate);
this._oMinDate = new Date(oMinDate);
this._oMaxDate = new Date(oMaxDate);
this.setProperty("minDate", oMinDate, true);
this.setProperty("maxDate", oMaxDate, true);
if (this._oCalendar) {
this._oCalendar.setMinDate(oMinDate);
this._oCalendar.setMaxDate(oMaxDate);
}
}

// check if wanted date now in range
if (this._oWantedDate && this._oWantedDate.getTime() >= this._oMinDate.getTime() && this._oWantedDate.getTime() <= this._oMaxDate.getTime()) {
this.setDateValue(this._oWantedDate);
}

};

DatePicker.prototype.setValueFormat = function(sValueFormat) {

// if valueFormat changes the value must be parsed again
Expand Down Expand Up @@ -490,6 +618,7 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
}

var oDate;
this._oWantedDate = undefined;
this._bValid = true;
if (sValue != "") {
oDate = this._parseValue(sValue, true);
Expand Down Expand Up @@ -645,7 +774,11 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
if (!this._oCalendar) {
sap.ui.getCore().loadLibrary("sap.ui.unified");
jQuery.sap.require("sap.ui.unified.library");
this._oCalendar = new sap.ui.unified.Calendar(this.getId() + "-cal", {intervalSelection: this._bIntervalSelection});
this._oCalendar = new sap.ui.unified.Calendar(this.getId() + "-cal", {
intervalSelection: this._bIntervalSelection,
minDate: this.getMinDate(),
maxDate: this.getMaxDate()
});
this._oDateRange = new sap.ui.unified.DateRange();
this._oCalendar.addSelectedDate(this._oDateRange);
this._oCalendar.attachSelect(this._selectDate, this);
Expand Down Expand Up @@ -828,13 +961,15 @@ sap.ui.define(['jquery.sap.global', './InputBase', 'sap/ui/model/type/Date', 'sa
oDate = new UniversalDate(this._oMaxDate.getTime());
}

this.setDateValue(new Date(oDate.getTime()));
if (!jQuery.sap.equal(this.getDateValue(), oDate.getJSDate())) {
this.setDateValue(new Date(oDate.getTime()));

this._curpos = iCurpos;
this._$input.cursorPos(this._curpos);
this._curpos = iCurpos;
this._$input.cursorPos(this._curpos);

var sValue = this.getValue();
this.fireChangeEvent(sValue, {valid: true});
var sValue = this.getValue();
this.fireChangeEvent(sValue, {valid: true});
}
}

}
Expand Down
54 changes: 54 additions & 0 deletions src/sap.m/src/sap/m/DateRangeSelection.js
Expand Up @@ -193,6 +193,8 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],

if (sValue) {
aDates = this._parseValue(sValue);
this._oWantedDate = aDates[0];
this._oWantedSecondDate = aDates[1];
aDates = _dateRangeValidityCheck.call(this, aDates[0], aDates[1]);
if (!aDates[0]) {
this._bValid = false;
Expand All @@ -202,6 +204,8 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],
if (this._bValid) {
this.setProperty("dateValue", aDates[0], true);
this.setProperty("secondDateValue", aDates[1], true);
this._oWantedDate = undefined;
this._oWantedSecondDate = undefined;
}

// Do not call InputBase.setValue because the displayed value and the output value might have different pattern
Expand Down Expand Up @@ -332,10 +336,12 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],
if (oDateValue && (oDateValue.getTime() < this._oMinDate.getTime() || oDateValue.getTime() > this._oMaxDate.getTime())) {
this._bValid = false;
jQuery.sap.assert(this._bValid, "Date must be in valid range");
this._oWantedDate = oDateValue;
oDateValue = undefined; // don't use wrong date to determine sValue
}else {
this._bValid = true;
this.setProperty("dateValue", oDateValue, true); // no rerendering
this._oWantedDate = undefined;
}

var oSecondDateValue = this.getSecondDateValue();
Expand Down Expand Up @@ -376,10 +382,12 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],
if (oSecondDateValue && (oSecondDateValue.getTime() < this._oMinDate.getTime() || oSecondDateValue.getTime() > this._oMaxDate.getTime())) {
this._bValid = false;
jQuery.sap.assert(this._bValid, "Date must be in valid range");
this._oWantedSecondDate = oSecondDateValue;
oSecondDateValue = undefined; // don't use wrong date to determine sValue
}else {
this._bValid = true;
this.setProperty("secondDateValue", oSecondDateValue, true); // no rerendering
this._oWantedSecondDate = undefined;
}

var oDateValue = this.getDateValue();
Expand All @@ -404,6 +412,50 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],
}

return this;

};

DateRangeSelection.prototype.setMinDate = function(oDate) {

DatePicker.prototype.setMinDate.apply(this, arguments);

if (oDate) {
var oSecondDateValue = this.getSecondDateValue();
if (oSecondDateValue && oSecondDateValue.getTime() < this._oMinDate.getTime()) {
jQuery.sap.log.warning("SecondDateValue not in valid date -> changed to minDate", this);
this.setSecondDateValue(new Date(this._oMinDate));
}
}

return this;

};

DateRangeSelection.prototype.setMaxDate = function(oDate) {

DatePicker.prototype.setMaxDate.apply(this, arguments);

if (oDate) {
var oSecondDateValue = this.getSecondDateValue();
if (oSecondDateValue && oSecondDateValue.getTime() > this._oMaxDate.getTime()) {
jQuery.sap.log.warning("SecondDateValue not in valid date -> changed to maxDate", this);
this.setSecondDateValue(new Date(this._oMaxDate));
}
}

return this;

};

DateRangeSelection.prototype._checkMinMaxDate = function() {

DatePicker.prototype._checkMinMaxDate.apply(this, arguments);

// check if wanted date now in range
if (this._oWantedSecondDate && this._oWantedSecondDate.getTime() >= this._oMinDate.getTime() && this._oWantedSecondDate.getTime() <= this._oMaxDate.getTime()) {
this.setSecondDateValue(this._oWantedSecondDate);
}

};

//Support of two date range version added into original DatePicker's version
Expand Down Expand Up @@ -491,6 +543,8 @@ sap.ui.define(['jquery.sap.global', './DatePicker', './library'],

var sValue = this._$input.val();
var aDates = [undefined, undefined];
this._oWantedDate = undefined;
this._oWantedSecondDate = undefined;
this._bValid = true;
if (sValue != "") {
aDates = this._parseValue(sValue);
Expand Down
2 changes: 2 additions & 0 deletions src/sap.m/test/sap/m/DatePicker.html
Expand Up @@ -114,6 +114,8 @@
editable: false}),
new sap.m.Label({text: "islamic DatePicker with secondary gregorianic", labelFor: "DP7"}),
new sap.m.DatePicker("DP7", { displayFormatType: "Islamic", secondaryCalendarType: "Gregorian", change: handleChange }),
new sap.m.Label({text: "DatePicker with minDate=2016-01-01 and maxDate=2016-12-31", labelFor: "DP10"}),
new sap.m.DatePicker("DP10", { minDate: new Date("2016", "0", "01"), maxDate: new Date("2016", "11", "31"), change: handleChange }),
new sap.m.Input("I2", {value: "Content of events DatePicker", editable: false}),
new sap.m.Label({text: "Warnig DatePicker:", labelFor: "DP8"}),
new sap.m.DatePicker("DP8", { valueState: "Warning", valueStateText: "Warning Message" }),
Expand Down
3 changes: 3 additions & 0 deletions src/sap.m/test/sap/m/DateRangeSelection.html
Expand Up @@ -74,6 +74,9 @@
new sap.m.Label({text: "islamic DateRangeSelection with secondary gregorianic", labelFor: "DRS4"}),
new sap.m.DateRangeSelection("DRS4", { displayFormatType: "Islamic", secondaryCalendarType: "Gregorian", change: handleChange }),

new sap.m.Label({text: "DateRangeSelection with minDate=2016-01-01 and maxDate=2016-12-31", labelFor: "DRS7"}),
new sap.m.DateRangeSelection("DRS7", { minDate: new Date("2016", "0", "01"), maxDate: new Date("2016", "11", "31"), change: handleChange }),

new sap.m.Text({width: "100%"}), new sap.m.Text({width: "100%"}),
new sap.m.Text({width: "100%"}), new sap.m.Text({width: "100%"}), // 6 empty lines
new sap.m.Text({width: "100%"}), new sap.m.Text({width: "100%"}),
Expand Down
Expand Up @@ -13,6 +13,9 @@ sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],
this.getView().setModel(oModel);

this.byId("DP3").setDateValue(new Date());
this.byId("DP6").setMinDate(new Date(2016, 0, 1));
this.byId("DP6").setMaxDate(new Date(2016, 11, 31));
this.byId("DP6").setDateValue(new Date(2016, 1, 16));

this._iEvent = 0;

Expand Down
5 changes: 5 additions & 0 deletions src/sap.m/test/sap/m/demokit/sample/DatePicker/Group.view.xml
Expand Up @@ -30,6 +30,11 @@
displayFormatType="Islamic"
secondaryCalendarType="Gregorian"
change="handleChange"/>
<Label text="DatePicker with minDate=2016-01-01 and maxDate=2016-12-31" labelFor="DP6"/>
<DatePicker
id="DP6"
displayFormat="short"
change="handleChange"/>
<Text
id="T1"
text="change event result"
Expand Down
Expand Up @@ -20,7 +20,11 @@ sap.ui.define(['sap/ui/core/mvc/Controller','sap/ui/model/json/JSONModel'],
delimiterDRS1: "@",
dateValueDRS1: dateFrom,
secondDateValueDRS1: dateTo,
dateFormatDRS1: "yyyy/MM/dd"
dateFormatDRS1: "yyyy/MM/dd",
dateValueDRS2: new Date(2016, 1, 16),
secondDateValueDRS2: new Date(2016, 1, 18),
dateMinDRS2: new Date(2016, 0, 1),
dateMaxDRS2: new Date(2016, 11, 31)
});
this.getView().setModel(oModel);

Expand Down
Expand Up @@ -12,7 +12,15 @@
secondDateValue="{path:'/secondDateValueDRS1'}"
displayFormat="{path:'/dateFormatDRS1'}"
change="handleChange"
class="sapUiMediumMarginBottom"
/>
<Label text="DateRangeSelection with minDate=2016-01-01 and maxDate=2016-12-31:" labelFor="DRS2"/>
<DateRangeSelection
id="DRS2"
dateValue="{path:'/dateValueDRS2'}"
secondDateValue="{path:'/secondDateValueDRS2'}"
minDate="{path:'/dateMinDRS2'}"
maxDate="{path:'/dateMaxDRS2'}"
change="handleChange"
/>

<Label text="Change event" labelFor="TextEvent" />
Expand Down

0 comments on commit 999d89a

Please sign in to comment.