Skip to Content

Recently in order to resolve customer incidents, I need to study more details about DatePicker control. I share what I have learned in this blog.

What does DatePicker look like

/wp-content/uploads/2015/10/clipboard1_806822.png

There is a small window icon, by clicking it, you can choose any date from popped up calendar.

/wp-content/uploads/2015/10/clipboard2_806823.png

How to define DatePicker in xml view

<caui:DatePicker id="td"
          value="{path: 'vm>/ToDate', type:'sap.ui.model.type.Date', formatOptions: { style: 'long'}}"
          change="onToDateChanged"></caui:DatePicker>

– namespace for caui: xmlns:caui=”sap.ca.ui”

– onToDateChanged is event handler defined in application ( consumer ). The event name is: “change”.

Implementation of DatePicker.js

You can find source code via the path: sap/ca/ui/DatePicker.js.

/wp-content/uploads/2015/10/clipboard3_806824.png

By reading the source code, here are some keynotes:

1. The DatePicker is a composite control, which holds a calendar control internally. This could be known by line 38 ( reference this._oCalendar points to the internal calendar control ).

2. The DatePicker has sap.m.InputBase as its prototype ( line 34 ).

3. The DatePicker has two properties defined in metadata. To be exactly, there are three. The third is “Value” which comes from the prototype “sap.m.InputBase”.

properties: {
            "firstDayOffset": {
                type: "int",
                group: "Data",
                defaultValue: 0
            },
            "dateValue": {
                type: "string",
                group: "Misc",
                defaultValue: null
            }
} 

4. Whenever there is selection change in DatePicker, it will call fireChange and finally event “change” is issued. This is reason why you have to bind your event listener to “change” event in xml view. You can also find that two values ( newValue, newYyyymmdd) are passed to event listener as parameters. We will debug it later.

sap.ca.ui.DatePicker.prototype.fireChange = function(u) {
    if (!this._dateType) {
        this._setUpDateType();
    }
    var c = this.getValue();
    var t = this._validateDate(c);
    if (u || u === undefined) {
        this.dateObj = t;
    }
    this.setDateValue(t);
    var d = null ;
    if (t) {
        d = this._toDateStringYYYYMMDD(t);
    }
    this.fireEvent("change", {
        newValue: c,
        newYyyymmdd: d,
        invalidValue: t ? false : true
    });
    return this;
}

Implementation of Calendar.js

Do Element inspection via Chrome development tool, for example inspect the UI area for Oct-16, you can find the area actually consists of a span node with value 16 and another hidden input with content “Fri Oct 16 2015”.

/wp-content/uploads/2015/10/clipboard5_806829.png

Scroll down and you can find more divs which represent the corresponding date in UI.

/wp-content/uploads/2015/10/clipboard6_806830.png

When and where are these divs generated?

1. In the init function of DatePicker, it fetches the prefix for each day which is used to render the content of hidden input element as introduced before.

/wp-content/uploads/2015/10/clipboard7_806834.png

The same logic for month abbreviation name:

/wp-content/uploads/2015/10/clipboard8_806837.png

2. When you click the small icon of DatePicker, the calendar is to be rendered. Thus the render function of CalendarRender.js is called. Here below is the logic to populate span node and hidden input node.

/wp-content/uploads/2015/10/clipboard9_806838.png

event design in Calendar.js

Source code of Calendar.js could be found here. There is event tapOnDate defined in its metadata, with one parameter “date”.

/wp-content/uploads/2015/10/clipboard10_806839.png

Event delegation in the runtime

1. When a given date is selected by end user, a jQuery event is issued:

The below screenshot indicates that I have selected “Oct-15”.

/wp-content/uploads/2015/10/clipboard11_806840.png

The private function _gestureSelect of Calendar.js is called:

Inside this function, the selected date is returned:

/wp-content/uploads/2015/10/clipboard12_806841.png

And then raise the UI5 event “TapOnDate” with selected date:

/wp-content/uploads/2015/10/clipboard13_806842.png

2. The event handler defined during the creation of internal Calendar control is called now. The passed in raw date “Thu Oct 15 2015” is formatted to “Oct 15 2015”, and then assigned to property “DateValue”.

/wp-content/uploads/2015/10/clipboard14_806846.png

Do you still remember another property “Value”? It will be filld by line 48: this.setProperty(“value”, t):

Its value comes from the format result of date object:

/wp-content/uploads/2015/10/clipboard15_806848.png

after line 20 is executed, the formatted date is “October 15, 2015”:

/wp-content/uploads/2015/10/clipboard16_806849.png

/wp-content/uploads/2015/10/clipboard17_806850.png

So which exactly line of code triggers the change of the DatePicker control display, from previous date to the selected date?

For example, I have selected Oct-15 in UI, and after line 2732 below is executed, the field of DatePicker in UI will refresh correspondingly to October 15, 2015.

/wp-content/uploads/2015/10/clipboard18_806851.png

Internally, it is because setValue of DatePicker is called:

/wp-content/uploads/2015/10/clipboard19_806852.png

The call is further delegated to prototype sap.m.InputBase:

/wp-content/uploads/2015/10/clipboard20_806853.png

Here the Dom value is changed, so UI is refreshed accordingly.

/wp-content/uploads/2015/10/clipboard21_806854.png

/wp-content/uploads/2015/10/clipboard22_806858.png

Then DatePicker.js again raises its change event to application ( consumer ) with the two parameters:

/wp-content/uploads/2015/10/clipboard23_806859.png

3. Then the event handler defined in application xml view is called:

/wp-content/uploads/2015/10/clipboard24_806860.png

When does the formatOptions set in XML view take effect?

In xml view, we have defined style long for DatePicker’s formatOptions.

/wp-content/uploads/2015/10/clipboard25_806861.png

In the runtime, this binding information is represented by an instance of PropertyBinding. The path, type and formatOptions configured in xml view become corresponding attributes of the instance as displayed below.

The date object “Thu Oct 15 2015 00:00:00 GMT+0800 (China Standard)” is converted to String “October 15, 2015” by line 20, which is the final content you see in UI.

/wp-content/uploads/2015/10/clipboard26_806862.png

/wp-content/uploads/2015/10/clipboard27_806863.png

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply