Extjs 4.1.1 – multiselectable datepicker as plugin

A couple of weeks ago I wrote a post about creating a mutiselectable datepicker. The idea of creating this component was to use the object inheritance. Today, I would like to show how to create a multiselectable datepicker as a plugin to Ext.date.Picker. The code responsible for selecting dates is almost the same, the only thing which must be changed is the component initialization and access to the datepicker component. In order to make a plugin to any Ext.Component class, you must implement the init method which takes as argument a reference to the component – so let’s change the existing code to meet this requirement. We need to rename initComponent function to init. In addition to, we should delete the extend property from our code. After these changes the init function looks like this:

Please notice, that the init function takes as an argument the datepicker component – and from now on this is our only way to access this component. The rest of the code also requires some modifications – it’s necessary to change all references to the datepicker (from the variable me to me.datePicker). The entire code listing is presented below.

Here is example of usage;

and the result
multiselectable datepicker
Source code for this post can be found here

Extjs 4.1.1 – multiselectable datepicker as plugin

2 thoughts on “Extjs 4.1.1 – multiselectable datepicker as plugin

  1. Nice. I added

    , setValue: function (value) {
    var res;
    this.value = Ext.Date.clearTime(value, true);
    res = this.update(this.value)
    return res;
    to the definition, to get the selections updated when changing month/year back and forth.

    It's a copy of the original setValue from datepicker with the addition of calling highlightDates. (strange that no event are sent from the original control when this is done…)


Comments are closed.