Skip to content

Commit

Permalink
[FEATURE] sap.ui.unified.Calendar: startDateChange event added
Browse files Browse the repository at this point in the history 
to recognize month switch

Change-Id: Iaba3ebe04a573f301746b6627f34555373fa1389
Fixes #600
  • Loading branch information
@UserAbcd1234
UserAbcd1234 committed Dec 2, 2015
1 parent 634c84b commit f20efb4
Show file tree
Hide file tree
Showing 5 changed files with 131 additions and 29 deletions.
61 changes: 51 additions & 10 deletions src/sap.ui.unified/src/sap/ui/unified/Calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,15 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
/**
* Date selection was cancelled
*/
cancel : {}
cancel : {},

/**
* <code>startDate</code> was changed while navigation in <code>Calendar</code>
*
* Use <code>getStartDate</code> function to determine the current start date
* @since 1.34.0
*/
startDateChange : {}
}
}});

Expand Down Expand Up @@ -365,6 +373,35 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

};

/**
* Returns the first day of the displayed month.
*
* There might be some days of the previous month shown, but they can not be focused.
*
* @returns {object} JavaScript date object for start date.
* @since 1.34.1
* @public
* @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
*/
Calendar.prototype.getStartDate = function(){

var oStartDate;

if (this.getDomRef()) {
// if rendered just use the date of the first month
var aMonths = this.getAggregation("month");
oStartDate = CalendarUtils._createUniversalUTCDate(aMonths[0].getDate(), this.getPrimaryCalendarType());
} else {
// if not rendered use the focused date
oStartDate = this._getFocusedDate();
}

oStartDate.setUTCDate(1);

return CalendarUtils._createLocalDate(oStartDate);

};

/**
* sets the Popup mode
* e.G. Tab-chain should not leave calendar
Expand Down Expand Up @@ -794,7 +831,6 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

oFocusedDate.setUTCDate(oFocusedDate.getUTCDate() - 1);
_renderMonth.call(this, bNoFocus, true);

break;

case 1: // month picker
Expand Down Expand Up @@ -921,8 +957,9 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
* @param {sap.ui.unified.Calendar} this Calendar instance
* @param {boolean} bNoFolus if set no focus is set to the date
* @param {boolean} bInLastMont if more than one month is used, date is rendered in last month
* @param {boolean} bNoEvent if set, no startDateChange event is fired
*/
function _renderMonth(bNoFocus, bInLastMonth){
function _renderMonth(bNoFocus, bInLastMonth, bNoEvent){

var oDate = this._getFocusedDate();
var aMonths = this.getAggregation("month");
Expand Down Expand Up @@ -971,6 +1008,10 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

// change month and year
this._updateHeader(oFirstDate);

if (!bNoEvent) {
this.fireStartDateChange();
}
}

}
Expand Down Expand Up @@ -1188,7 +1229,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
}
}else if (this.getMonths() > 1) {
// on rerendering focus might be set on wrong month
_focusDate.call(this, this._getFocusedDate(), true);
_focusDate.call(this, this._getFocusedDate(), true, true);
}

}
Expand Down Expand Up @@ -1226,7 +1267,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

}

function _focusDate (oDate, bOtherMonth){
function _focusDate (oDate, bOtherMonth, bNoEvent){

// if a date should be focused thats out of the borders -> focus the border
var oFocusedDate;
Expand All @@ -1243,15 +1284,15 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

if (this._focusDateExtend) {
// hook for CalenarDateInterval
this._focusDateExtend(oDate, bOtherMonth);
this._focusDateExtend(oDate, bOtherMonth, bNoEvent);
}

var bInLastMonth = oFocusedDate.getTime() < this._getFocusedDate().getTime();

this._setFocusedDate(oFocusedDate);

if (bChanged || bOtherMonth) {
_renderMonth.call(this, false, bInLastMonth);
_renderMonth.call(this, false, bInLastMonth, bNoEvent);
}

}
Expand Down Expand Up @@ -1344,7 +1385,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
this._setFocusedDate(oDate);

if (this.getDomRef() && this._iMode == 0) {
_renderMonth.call(this, bNoFocus);
_renderMonth.call(this, bNoFocus, false, true); // fire no startDateChange event on programmatical change
}
}

Expand Down Expand Up @@ -1414,7 +1455,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
if (bRestoreOldDate) {
// in multimonth mode stay at the last focused date
if (!jQuery.sap.equal(this._getFocusedDate(), oDate)) {
_renderMonth.call(this, false);
_renderMonth.call(this, false, false, true);
}
} else {
_focusDate.call(this, oDate, bOtherMonth);
Expand Down Expand Up @@ -1502,7 +1543,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

if (aMonths.length > 1) {
// restore focus
_focusDate.call(this, this._getFocusedDate(), true);
_focusDate.call(this, this._getFocusedDate(), true, true);
}
this._bDateRangeChanged = undefined;

Expand Down
27 changes: 16 additions & 11 deletions src/sap.ui.unified/src/sap/ui/unified/CalendarDateInterval.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,6 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
*/
pickerPopup : {type : "boolean", group : "Appearance", defaultValue : false}

},
events : {

/**
* <code>startDate</code> was changed while navigation in <code>CalendarDateInterval</code>
* @since 1.34.0
*/
startDateChange : {}
}
}});

Expand Down Expand Up @@ -126,6 +118,19 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

};

// needs to be overwritten because differently implemented in Calendar
/**
* Gets current value of property startDate.
*
* Start date of the Interval
* @returns {object} JavaScript date object for property startDate
*/
CalendarDateInterval.prototype.getStartDate = function(){

return this.getProperty("startDate");

};

CalendarDateInterval.prototype.setDays = function(iDays){

this.setProperty("days", iDays, true);
Expand Down Expand Up @@ -271,7 +276,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
var oDatesRow = this.getAggregation("month")[0];
if (!oDatesRow.checkDateFocusable(oDate)) {
var oUTCDate = CalendarUtils._createUniversalUTCDate(oDate, this.getPrimaryCalendarType());
this._focusDateExtend(oUTCDate, true);
this._focusDateExtend(oUTCDate, true, true);
}

Calendar.prototype.focusDate.apply(this, arguments);
Expand All @@ -280,7 +285,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa

};

CalendarDateInterval.prototype._focusDateExtend = function(oDate, bOtherMonth) {
CalendarDateInterval.prototype._focusDateExtend = function(oDate, bOtherMonth, bNoEvent) {

// set start date according to new focused date
// only if focused date is not in current rendered date interval
Expand All @@ -291,7 +296,7 @@ sap.ui.define(['jquery.sap.global', 'sap/ui/core/Control', 'sap/ui/core/LocaleDa
var iDay = Math.ceil((oOldDate.getTime() - oStartDate.getTime()) / (1000 * 3600 * 24));
oStartDate = this._newUniversalDate(oDate);
oStartDate.setUTCDate( oStartDate.getUTCDate() - iDay);
_setStartDate.call(this, oStartDate, false);
_setStartDate.call(this, oStartDate, false, bNoEvent);
}

};
Expand Down
21 changes: 21 additions & 0 deletions src/sap.ui.unified/test/sap/ui/unified/Calendar.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,12 +81,19 @@
},
cancel: function(oEvent){
alert("Cancel");
},
startDateChange: function(oEvent){
var oTF = sap.ui.getCore().byId("TF2");
var oCalendar = oEvent.oSource;
var oDate = oCalendar.getStartDate();
oTF.setValue(oFormatYyyymmdd.format(oDate));
}
}).placeAt("sample1");

var oLabel = new sap.ui.commons.Label({text: "selected date", labelFor: "TF1"}).placeAt("event1");
var oInput = new sap.ui.commons.TextField("TF1",{
editable: true,
width: "8em",
placeholder: "yyyyMMdd",
change: function(oEvent){
var oTF = oEvent.oSource;
Expand All @@ -109,10 +116,22 @@
}
}).placeAt("event1");

oLabel = new sap.ui.commons.Label({text: "start date", labelFor: "TF2"}).placeAt("event1");
var oInput = new sap.ui.commons.TextField("TF2",{
editable: false,
width: "8em",
placeholder: "yyyyMMdd",
value: oFormatYyyymmdd.format(oCal.getStartDate())
}).placeAt("event1");

var oButton = new sap.ui.commons.Button({
text: "focus today",
press: function(oEvent){
sap.ui.getCore().byId("Cal1").focusDate(new Date());
var oTF = sap.ui.getCore().byId("TF2");
var oCalendar = sap.ui.getCore().byId("Cal1");
var oDate = oCalendar.getStartDate();
oTF.setValue(oFormatYyyymmdd.format(oDate));
}
}).placeAt("event1");

Expand Down Expand Up @@ -145,6 +164,7 @@
oLabel = new sap.ui.commons.Label({text: "primary calendar type", labelFor: "CB1"}).placeAt("event1");
oCB1 = new sap.ui.commons.ComboBox("CB1",{
editable: true,
width: "9em",
items: [
new sap.ui.core.ListItem({text: sap.ui.core.CalendarType.Gregorian, key: sap.ui.core.CalendarType.Gregorian}),
new sap.ui.core.ListItem({text: sap.ui.core.CalendarType.Islamic, key: sap.ui.core.CalendarType.Islamic}),
Expand All @@ -165,6 +185,7 @@
oLabel = new sap.ui.commons.Label({text: "secondary calendar type", labelFor: "CB2"}).placeAt("event1");
oCB2 = new sap.ui.commons.ComboBox("CB2",{
editable: true,
width: "9em",
items: [
new sap.ui.core.ListItem({text: sap.ui.core.CalendarType.Gregorian, key: sap.ui.core.CalendarType.Gregorian}),
new sap.ui.core.ListItem({text: sap.ui.core.CalendarType.Islamic, key: sap.ui.core.CalendarType.Islamic}),
Expand Down
29 changes: 27 additions & 2 deletions src/sap.ui.unified/test/sap/ui/unified/qunit/Calendar.qunit.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,11 +31,16 @@

var bSelectFired = false;
var oSelectedDate = undefined;
var iStartDateChangeFired = 0;
var oLocaleUS = new sap.ui.core.Locale("en-US");
var oLocaleDE = new sap.ui.core.Locale("de-DE");
var oLocaleDataUS = sap.ui.core.LocaleData.getInstance(oLocaleUS);
var oLocaleDataDE = sap.ui.core.LocaleData.getInstance(oLocaleDE);

var handleStartDateChange = function(oEvent) {
iStartDateChangeFired++;
};

var oCal1 = new sap.ui.unified.Calendar("Cal1",{
select: function(oEvent){
bSelectFired = true;
Expand All @@ -44,14 +49,16 @@
if (aSelectedDates.length > 0 ) {
oSelectedDate = aSelectedDates[0].getStartDate();
}
}
},
startDateChange: handleStartDateChange
}).placeAt("uiArea1");

var oCal2 = new sap.ui.unified.Calendar("Cal2",{
intervalSelection: true,
selectedDates: [new sap.ui.unified.DateRange({startDate: new Date("2011", "0", "10"), endDate: new Date("2011", "0", "13")})],
specialDates: [new sap.ui.unified.DateTypeRange({startDate: new Date("2011", "0", "1"), type: sap.ui.unified.CalendarDayType.Type01, tooltip: "Text"}),
new sap.ui.unified.DateTypeRange({startDate: new Date("2011", "0", "2"), endDate: new Date("2011", "0", "4"), type: sap.ui.unified.CalendarDayType.Type02, tooltip: "Text"})]
new sap.ui.unified.DateTypeRange({startDate: new Date("2011", "0", "2"), endDate: new Date("2011", "0", "4"), type: sap.ui.unified.CalendarDayType.Type02, tooltip: "Text"})],
startDateChange: handleStartDateChange
}).placeAt("uiArea2");
oCal2.setLocale("de-DE");

Expand All @@ -60,6 +67,7 @@
firstDayOfWeek: 2,
nonWorkingDays: [3, 5],
selectedDates: [new sap.ui.unified.DateRange({startDate: new Date("2015", "0", "5")})],
startDateChange: handleStartDateChange
}).placeAt("uiArea3");
oCal3.setLocale("de-DE");

Expand All @@ -82,6 +90,9 @@
$Month = sap.ui.getCore().byId("Cal3").getAggregation("month")[0].$();
var aWeekHeaders = $Month.find(".sapUiCalWH");
equal(jQuery(aWeekHeaders[0]).text(), "Di", "Thuesday ist first weekday for custom setting");

equal(iStartDateChangeFired, 0, "Initially no startdateChange event fired");
equal(oFormatYyyymmdd.format(oCal2.getStartDate()), "20110101", "Cal2: Start date");
});

test("rendered month", function() {
Expand Down Expand Up @@ -147,6 +158,7 @@
});

test("focusDate method", function() {
iStartDateChangeFired = 0;
oCal2.focusDate(new Date(2012, 11, 12));
equal(jQuery("#Cal2--Head-B1").text(), "Dezember", "December shown");
equal(jQuery("#Cal2--Head-B2").text(), "2012", "year 2012 shown");
Expand All @@ -159,6 +171,7 @@
}
}
ok((bFound && jQuery(aDays[i]).attr("data-sap-day") == "20121212"), "20121212 focused");
equal(iStartDateChangeFired, 0, "no startdateChange event fired");

oCal2.focusDate(new Date(2011, 0, 10));
});
Expand Down Expand Up @@ -245,6 +258,7 @@
module("Interaction");

test("month switch", function() {
iStartDateChangeFired = 0;
qutils.triggerEvent("click", "Cal2--Head-prev");
equal(jQuery("#Cal2--Head-B1").text(), "Dezember", "December shown");
equal(jQuery("#Cal2--Head-B2").text(), "2010", "year 2010 shown");
Expand All @@ -253,7 +267,10 @@
ok(jQuery(aDays[0]).hasClass("sapUiCalItemOtherMonth"), "first displayed day is in other month");
equal(jQuery(aDays[aDays.length-1]).attr("data-sap-day"), "20110102", "last displayed day");
ok(jQuery(aDays[aDays.length-1]).hasClass("sapUiCalItemOtherMonth"), "last displayed day is in other month");
equal(iStartDateChangeFired, 1, "startdateChange event fired");
equal(oFormatYyyymmdd.format(oCal2.getStartDate()), "20101201", "Start date");

iStartDateChangeFired = 0;
qutils.triggerEvent("click", "Cal2--Head-next");
equal(jQuery("#Cal2--Head-B1").text(), "Januar", "january shown again");
equal(jQuery("#Cal2--Head-B2").text(), "2011", "year 2011 shown again");
Expand All @@ -262,7 +279,10 @@
ok(jQuery(aDays[0]).hasClass("sapUiCalItemOtherMonth"), "first displayed day is in other month");
equal(jQuery(aDays[aDays.length-1]).attr("data-sap-day"), "20110206", "last displayed day");
ok(jQuery(aDays[aDays.length-1]).hasClass("sapUiCalItemOtherMonth"), "last displayed day is in other month");
equal(iStartDateChangeFired, 1, "startdateChange event fired");
equal(oFormatYyyymmdd.format(oCal2.getStartDate()), "20110101", "Start date");

iStartDateChangeFired = 0;
qutils.triggerEvent("click", "Cal2--Head-B1");
ok(jQuery(jQuery("#Cal2--MP").get(0)).is(":visible"), "Month picker rendered");
var $July = jQuery("#Cal2--MP-m6"); // use keybord to select month to prevent event processing from ItemNavigation
Expand All @@ -275,6 +295,8 @@
ok(jQuery(aDays[0]).hasClass("sapUiCalItemOtherMonth"), "first displayed day is in other month");
equal(jQuery(aDays[aDays.length-1]).attr("data-sap-day"), "20110731", "last displayed day");
ok(!jQuery(aDays[aDays.length-1]).hasClass("sapUiCalItemOtherMonth"), "last displayed day is not in other month");
equal(iStartDateChangeFired, 1, "startdateChange event fired");
equal(oFormatYyyymmdd.format(oCal2.getStartDate()), "20110701", "Start date");

// go back to january
qutils.triggerEvent("click", "Cal2--Head-B1");
Expand All @@ -300,6 +322,7 @@
});

test("year switch", function() {
iStartDateChangeFired = 0;
qutils.triggerEvent("click", "Cal2--Head-B2");
ok(jQuery("#Cal2--YP").get(0), "Year picker rendered");
ok(jQuery(jQuery("#Cal2--YP").get(0)).is(":visible"), "Year picker visible");
Expand All @@ -324,6 +347,8 @@
ok(jQuery(aDays[0]).hasClass("sapUiCalItemOtherMonth"), "first displayed day is in other month");
equal(jQuery(aDays[aDays.length-1]).attr("data-sap-day"), "19990131", "last displayed day");
ok(!jQuery(aDays[aDays.length-1]).hasClass("sapUiCalItemOtherMonth"), "last displayed day is not in other month");
equal(iStartDateChangeFired, 1, "startdateChange event fired");
equal(oFormatYyyymmdd.format(oCal2.getStartDate()), "19990101", "Start date");

qutils.triggerEvent("click", "Cal2--Head-B2");
ok(jQuery("#Cal2--YP").get(0), "Year picker rendered");
Expand Down

0 comments on commit f20efb4

Please sign in to comment.