DatePicker

Extjs 4.1.1 – multiselectable datepicker as plugin

TPodolak, , , , 2 Comments

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

Extjs 4.1.1 – multiselectable datepicker

TPodolak, , 2 Comments

Recently, I have been given a task to make extjs datepicker allowing for selection of multiple dates. Unfortunately afters hours of searching for some build-in function, it turned out that this kind of functionality is not supported by default. Finaly, I decided to extend datepicker by creating component called highlightableDatePicker. I started from creating a class which inhierits from Ext.picker.Date. First draft of class looked this way

In this class I created additional function highlightDates which is responsible for highlighting dates. Moreover, I added some additional config elements:

  • selectedDates – object keeping track of dates which should be selected
  • clsHighlightClass – css class defining selected cell style

The most important part of HighlightableDatepicker class is function highlightDates which is responsible for highlighting dates. The body of this method looks like this

As You can see, this function simply compares date in cell with dates stored in selectedDates. If there is a match, cell style is modified by adding extra CSS class into class attribute of cell (see addCls function of Extjs), otherwise CSS class responsible for highlighting is removed. Having defind highlightDates function,I also had to attach an event handler to select event, in order to modify collection of selected dates. This handler looks this way

The final step to make this control work is to attach event handlers and call highlightDates function during initialization of component.

Please, notice that highlightDates is called after component is rendered, because there is no rendered cells before that moment. Entire code listing is presented below

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

Extjs 4.1.1 – multiselectable datepicker