cancel
Showing results for 
Search instead for 
Did you mean: 

Uncaught TypeError: Cannot read property 'apply' of undefined(sap.m.DatePicker)

santhu_gowdaz
Active Contributor
0 Kudos

Dear All,

I override the java script Date() method to override system date and time from server date and time. The date picker is defaulted with server date but the problem is the datepicker dialog is not opening.

Date = function (Date) {

     MyDate.prototype = Date.prototype;

     return MyDate;

     function MyDate() {

         return currentServerDate;  //currentServerDate is my server date

     }

  }(Date);

I'm getting this below error,

Uncaught TypeError: Cannot read property 'apply' of undefined

(anonymous function) @ UniversalDate.js:6

c.init @ Calendar.js:6

E.extend.constructor @ sap-ui-core.js:152

M.extend.constructor @ sap-ui-core.js:152

E.extend.constructor @ sap-ui-core.js:152

f @ sap-ui-core.js:152

o @ sap-ui-core.js:143

_ @ DatePicker.js:6

b @ DatePicker.js:6

a.onclick @ DatePicker.js:6

a._callEventHandles @ sap-ui-core.js:152

a._handleEvent @ sap-ui-core.js:152

U._handleEvent @ sap-ui-core.js:152

p @ sap-ui-core.js:60

Q.event.dispatch @ sap-ui-core.js:71

v3.handle @ sap-ui-core.js:71

For working Date picker below .js are loading in network tab.

Calendar.js

CalendarUtils.js

Header.js

Month.js

MonthPicker.js

YearPicker.js

DateRange.js

CalendarRenderer.js

messagebundle_en_US.properties

HeaderRenderer.js

MonthRenderer.js

MonthPickerRenderer.js


But In this overriding case below .js are loading.

Calendar.js

CalendarUtils.js

Header.js

Month.js

MonthPicker.js

YearPicker.js

Please help me to resolve this.

Thanks,

Santhosh Gowda

Accepted Solutions (1)

Accepted Solutions (1)

former_member183518
Active Participant
0 Kudos

The overridden Date constructor doesn't have the date methods UTC, parse, now. The code in the framework breaks when it's trying to access one of the method. But I don't think even adding those methods to the overridden Date could give you a complete working Datepicker. I think its a bad idea to override the Date constructor as a solution for this

santhu_gowdaz
Active Contributor
0 Kudos

Hi Sakthi,

               Thanks for the replay. But this is my requirement. If the end user will change the system date, UI5 application should shows current date takes from server date.

1. I set server date to current date but still date picker today date selects from system.

26/10/2015 is the server date and i changed system date to 27/10/2015. How to set that purple box to 26/10/2015.

And its a complex because in all the applications need to change new Date() to server date.

2. Override Date() method, It ll reflect in all the applications.

Any easy way??

former_member183518
Active Participant
0 Kudos

Easy way would be to play around with the css. UI5 calendar adds a cutsom data-sap-day="<yyymmdd>" in each of div rendered. So the corresponding div of the system date's border can be made none and the border can be added to server date's div.  You can try to do as below, but a dirty way though!


oDatePicker.addEventDelegate({

    onclick: function() {

        var oDate = new Date(); // system date

        var sDateString = oDate.getUTCFullYear() + "" + (oDate.getUTCMonth() + 1) + "" + oDate.getUTCDate(); // 20151029

        var serverDate = "20151028"; //server date

        $("div[data-sap-day='" + sDateString + "']>span").css("border", "none");

        $("div[data-sap-day='" + serverDate + "']>span").css("border", "0.25rem solid #ab218e");

    }

});

JS Bin - Collaborative JavaScript Debugging

santhu_gowdaz
Active Contributor
0 Kudos

Great!!. But i will consider css as my last option. Because each and every datePicker need to apply in every Applicaton.

Is it possible to do override the UI5 methods without css (As Robin suggestion through extend).

santhu_gowdaz
Active Contributor
0 Kudos

Hi Sakthi, Jsbin is not working properly.

Any updates?

former_member183518
Active Participant
0 Kudos

They were working two days back and it doesn't work today! Reason ? Today's date is 02/11/2015. The day value is fetched as <date>.getUTCDate() which would only return 2.  The leading 0 will have to be added for the days < 10.


var sDay = (0 + oDate.getUTCDate().toString()).slice(-2);

var sMonth = (0 + (oDate.getUTCMonth()+1).toString()).slice(-2);

JS Bin - Collaborative JavaScript Debugging

Answers (2)

Answers (2)

0 Kudos

Hello Santosh,

Would like to know the scenario, why do you want to display current date from server date ? Because if the client's date is 5 Nov and it’s going to highlight probably  4 or 6 which would be then a wrong indication for the client.

Anyways

Option 1 : Get rid of the current date border completely using css by overriding the main css class.

.sapUiCalDayToday>.sapUiCalDayNum { border: none !important; line-height: 2.6875rem; } 

Your users will not be confused with current date border, and anyway you set the server date as default date.

Option 2 : Overriding the Date Picker method would not help, the highlight I guess comes from sap.ui.unified.calender.Month.js and it would not be simple to do it as the variable is set at many places using (new Date).

Option 3:  Overriding CSS might can only be a temporary workaround as you rightly said should be your last option, but in my opinion too not a good clean way as also mention by others.   

Regards,

Vasu

santhu_gowdaz
Active Contributor
0 Kudos

Hi Vasu,

        new Date() will gives system date.But in client system date is different so i took date from server.

For example: Create Sales Order - Document date by default with new Date()( assume system date is 07/11/2015) but as per server date (06/11/2015). That's way i'm setting server date.

But if i open date dialog- Purple color box is showing system date (i.e., 07/11/2015). As per my requirement it should be server date(06/11/2015).

Please correct me-JS Bin - Collaborative JavaScript Debugging

Qualiture
Active Contributor
0 Kudos

The 'today' date is determined in the sap.ui.unified.calendar.MonthRenderer class;

a helper object 'oHelper' is created with property 'oToday' which holds the current client date:


MonthRenderer.getDayHelper = function(oMonth, oDate){

  var oHelper = {};

  ....

  oHelper.oToday = CalendarUtils._createUniversalUTCDate(new Date());

  ....

  return oHelper;

};

Upon iterating through the month days, a check is done to see if the day matches today, and then the border class is applied:


if (oDay.getUTCMonth() == oHelper.oToday.getMonth() && oDay.getUTCFullYear() == oHelper.oToday.getFullYear() && oDay.getUTCDate() == oHelper.oTo day.getDate()) {

  oRm.addClass("sapUiCalDayToday");

  mAccProps["label"] = oHelper.sToday + " ";

}

So I guess you somehow need to override the MonthRenderer.getDayHelper method, but not sure if this can be done easily

santhu_gowdaz
Active Contributor
0 Kudos

Any help??

Qualiture
Active Contributor
0 Kudos

I don't think it is possible that way... The Javascript Date() object uses -- among others -- the getTimezoneOffset() method internally which I believe is *always* from the client pc

Better is to get the server date, and set the date with the date difference from the server -- or extend the DatePicker to use the server date instead of the standard client date

santhu_gowdaz
Active Contributor
0 Kudos

Hi Robin,

As you suggested i extended datepicker, But which method need to implement for that purple color highlighting to my Date. Currently  highlighting with system date as before i mentioned.

jQuery.sap.require("sap.m.DatePicker");

jQuery.sap.require("sap.ui.core.format.DateFormat");

jQuery.sap.declare("custom.m.DatePicker");

sap.m.DatePicker.extend("custom.m.DatePicker", {

  

   metadata : {

     properties : {

      dateValue: {

                  type: "object",

                  group: "Data",

                  defaultValue: new Date("Thu Oct 29 2015 00:00:00 GMT+0530 (India Standard Time)")

              },

     }

   },

   renderer : {},

   onAfterRendering : function() {

     sap.m.DatePicker.prototype.onAfterRendering.apply(this, arguments);

   },

  

  });

Qualiture
Active Contributor
0 Kudos

I'm not sure, but I would think the setDateValue method of the DatePicker should handle that

santhu_gowdaz
Active Contributor
0 Kudos

"setDateValue" is setting the date value but in sap.m.datepicker purple color highlighting is based on system date.

so i setDateValue with currentServerDate but i'm not able to do "purple color highlighting" with currentServerDate.

may be  "sap/ui/unified" calendar - lib's are taken care of this highlighting DatePicker But still failing to find out.