{"id":46,"date":"2012-07-19T21:31:00","date_gmt":"2012-07-19T21:31:00","guid":{"rendered":"http:\/\/tpodolak.com.hostingasp.pl\/blog\/2012\/07\/19\/extjs-4-1-1-multiselectable-datepicker\/"},"modified":"2016-01-31T00:13:14","modified_gmt":"2016-01-31T00:13:14","slug":"extjs-4-1-1-multiselectable-datepicker","status":"publish","type":"post","link":"https:\/\/tpodolak.com\/blog\/2012\/07\/19\/extjs-4-1-1-multiselectable-datepicker\/","title":{"rendered":"Extjs 4.1.1 &#8211; multiselectable datepicker"},"content":{"rendered":"<p>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 <i>highlightableDatePicker<\/i>. I started from creating a class which inhierits from <i>Ext.picker.Date<\/i>. First draft of class looked this way<\/p>\n<pre lang=\"javascript\">\r\nExt.define('HighlightableDatePicker', {\r\n    extend: 'Ext.picker.Date',\r\n    selectedDates:{},\r\n    clsHighlightClass:'x-datepicker-selected',\r\n    initComponent: function(){\r\n        var me = this;\r\n        me.callParent(arguments);\r\n    },\r\n\r\n    highlightDates: function(){\r\n        var me = this;\r\n    }\r\n})\r\n<\/pre>\n<p>In this class I created additional function <i>highlightDates<\/i> which is responsible for highlighting dates. Moreover, I added some additional config elements:<\/p>\n<ul>\n<li>selectedDates &#8211; object keeping track of dates which should be selected<\/li>\n<li>clsHighlightClass &#8211; css class defining selected cell style<\/li>\n<\/ul>\n<p>The most important part of <i>HighlightableDatepicker<\/i> class is function <i>highlightDates<\/i> which is responsible for highlighting dates. The body of this method looks like this<\/p>\n<pre lang=\"javascript\">\r\nhighlightDates: function(){\r\n      var me = this;\r\n       if(!me.cells)\r\n           return;\r\n       me.cells.each(function(item){\r\n           var date = new Date(item.dom.firstChild.dateValue).toDateString();\r\n           if(me.selectedDates[date]){\r\n               if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){\r\n                   item.addCls(me.clsHighlightClass)\r\n               }\r\n           }else{\r\n               item.removeCls(me.clsHighlightClass);\r\n           }\r\n       })\r\n}\r\n<\/pre>\n<p>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 <i>class<\/i> attribute of cell (see addCls function of Extjs), otherwise CSS class responsible for highlighting is removed. Having defind <i>highlightDates<\/i> function,I also had to attach an event handler to <i>select<\/i> event, in order to modify collection of selected dates. This handler looks this way<\/p>\n<pre lang=\"javascript\">\r\nhandleSelectionChanged: function(cmp, date){\r\n   var me = this;\r\n       if(me.selectedDates[date.toDateString()])\r\n           delete me.selectedDates[date.toDateString()]\r\n       else\r\n           me.selectedDates[date.toDateString()] = date;\r\n       me.highlightDates();\r\n}\r\n<\/pre>\n<p>The final step to make this control work is to attach event handlers and call <i>highlightDates<\/i> function during initialization of component.<\/p>\n<pre lang=\"javascript\">\r\ninitComponent: function() {\r\n        var me = this;\r\n        me.callParent(arguments);\r\n        me.on('select',me.handleSelectionChanged,me);\r\n        me.on('afterrender',me.highlightDates,me);\r\n}\r\n<\/pre>\n<p>Please, notice that <i>highlightDates<\/i> is called after component is rendered, because there is no rendered cells before that moment. Entire code listing is presented below<\/p>\n<pre lang=\"javascript\">\r\nExt.define('HighlightableDatePicker', {\r\n    extend: 'Ext.picker.Date',\r\n    selectedDates : {},\r\n    clsHighlightClass :'x-datepicker-selected',\r\n    \r\n    initComponent: function(){\r\n        var me = this;\r\n        me.callParent(arguments);\r\n        me.on('select',me.handleSelectionChanged,me);\r\n        me.on('afterrender',me.highlightDates,me);\r\n\r\n    },\r\n    \r\n    highlightDates: function(){\r\n        var me = this;\r\n        if(!me.cells)\r\n            return;\r\n        me.cells.each(function(item){\r\n            var date = new Date(item.dom.firstChild.dateValue).toDateString();\r\n            if(me.selectedDates[date]){\r\n                if(item.getAttribute('class').indexOf(me.clsHighlightClass)=== -1){\r\n                    item.addCls(me.clsHighlightClass)\r\n                }\r\n            }else{\r\n                item.removeCls(me.clsHighlightClass);\r\n            }\r\n        })\r\n    },\r\n\r\n    handleSelectionChanged: function(cmp, date){\r\n        var me = this;\r\n        if(me.selectedDates[date.toDateString()])\r\n            delete me.selectedDates[date.toDateString()]\r\n        else\r\n            me.selectedDates[date.toDateString()] = date;\r\n        me.highlightDates();\r\n    }\r\n})\r\n<\/pre>\n<p>and the result<br \/>\n<a href=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/datepicker.jpg\" rel=\"attachment wp-att-405\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/datepicker.jpg\" alt=\"multiselectable datepicker\" width=\"177\" height=\"199\" class=\"aligncenter size-full wp-image-405\" srcset=\"https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/datepicker.jpg 177w, https:\/\/tpodolak.com\/blog\/wp-content\/uploads\/2012\/09\/extjs-4-1-1-multiselectable-datepicker-as-plugin\/datepicker-133x150.jpg 133w\" sizes=\"auto, (max-width: 177px) 100vw, 177px\" \/><\/a><br \/>\nSource code for this post can be found <a href=\"https:\/\/github.com\/tpodolak\/Blog\/tree\/master\/ExtjsMultiselectableDatePicker\">here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[102,67,18],"tags":[235,210,174],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-datepicker","category-extjs-4-1-1","category-javascript","tag-datepicker","tag-extjs-4-1-1","tag-javascript"],"_links":{"self":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":4,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":552,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions\/552"}],"wp:attachment":[{"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tpodolak.com\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}