Popup Cell Editor "calendar"

This View configuration is used to setup an editor View as a "calendar" popup cell editor that includes a Y.Calendar widget incorporated within the View container.

Basic Usage

   // Column definition
   { key:'startDate', editor:"calendar" }

   // Column definition ...
   { key:'birthdate', label:'Employee DOB', formatter:"shortDate",
     editor:"calendar", editorConfig:{
        inputKeys:false,
     }
   }

Standard Configuration

This editor includes (a) an INPUT[text] and (b) Y.Calendar widget instance all within the same Overlay content.

Configuration for this View is considerably more complex compared to other Views, requiring additional functions and listener functions to setup the Y.Calendar widget and to account for widget actions and events.

The configuration {Object} for this cell editor View is predefined as;

   Y.DataTable.EditorOptions.calendar = {
       BaseViewClass:  Y.DataTable.BaseCellPopupEditor,
       name:           'calendar',
       inputKeys:      true,

       templateObject: {
           html: 'Enter Date: &nbsp; <input type="text" title="inline cell editor" class="<%= this.classInput %>"  />'
               + '<br/><div class="yui3-dt-editor-calendar"></div>'
       },

       // setup two buttons "Save" and "Cancel" for the containing overlay
       overlayConfig:{
           buttons:   [
               { name:'save', value: 'Save',
                   action:function(){
                       var val = (this._inputNode) ? this._inputNode.get('value') : null;
                       this.saveEditor(val);
                   }
               },
               { name:'cancel', value: 'Cancel',
                   action:function(){ this.cancelEditor(); }
               }
           ]
       },

       inputWidth: 75,   // set the INPUT[type=text] field width in the Overlay

       // only allow keyboard input of digits or '/' or '-' within the editor ...
       keyFiltering:   /\/|\d|\-/,

       // Function to call prior to displaying editor, to put a human-readable Date into
       //  the INPUT box initially ...
       prepFn: function(v){
           var dfmt = this.get('dateFormat') || "%D" || "%m/%d/%Y";
           return Y.DataType.Date.format(v,{format:dfmt});
       },

       // Function to call after Date editing is complete, prior to saving to DataTable ...
       //  i.e. converts back to "Date" format that DT expects ...
       saveFn: function(v){
           return Y.DataType.Date.parse(v) || undefined;
       },

       //
       // cell editor View instance event listeners ...
       //
       after: {

           //-------
           // After this View is created,
           //    create the Calendar widget ...
           //-------
           editorCreated: function(){
               var calNode = this.overlay.get('contentBox').one('.yui3-dt-editor-calendar'),
                   calWidget,

                   // Define a basic config object for Y.Calendar ...
                   calConfig = {
                       // don't define a srcNode in here, because we are creating the node ...
                       height: '215px',
                       width:  '200px',
                       showPrevMonth: true,
                       showNextMonth: true,

                       // Setup this Calendar widget instance's event listeners ...
                       after: {

                           //-------
                           // After a "selection" is made in the widget,
                           //   updates the Editor's INPUT box on a widget date selection ...
                           //-------
                           selectionChange : function(o){
                               var newDate = o.newSelection[0],
                                   editor  = this.editor, //this.get('editor'),
                                   prepFn  = editor.get('prepFn'),
                                   inpn    = editor._inputNode;
                               inpn.set('value', (prepFn) ? prepFn.call(this,newDate) : newDate );
                           },

                           //-------
                           // After a date is clicked in the widget,
                           //   save the Date
                           //-------
                           dateClick: function(o){
                               var newDate = o.date,
                                   editor  = this.editor;
                               editor.saveEditor(newDate);
                           }
                       }
                   },

                   // Pass in user options via calendarConfig
                   userCalConfig = this.get('calendarConfig') || {};

               //
               //  If the srcNode exists, and Y.Calendar library is available ... create the Widget
               //
               if(calNode && Y.Calendar) {
                   // combine the base configs with user configs
                   calConfig = Y.merge(calConfig,userCalConfig);

                   calConfig.srcNode = calNode;
                   calWidget = new Y.Calendar(calConfig).render();

                   // Attach a plugin to the Widget instance, if it is available
                   if(Y.Plugin.Calendar && Y.Plugin.Calendar.JumpNav) {
                       this.plug( Y.Plugin.Calendar.JumpNav, {
                           yearStart: 1988, yearEnd:   2021
                       });
                   }

               }

               //
               //  Set a property on the Calendar widget instance to trackback to this editor view,
               //  AND also attach the Widget instance to this view
               //
               calWidget.editor = this;
               this.widget = calWidget;

           },

           //-------
           // After this View is destroyed,
           //    we need to destroy the Calendar widget instance ...
           //-------
           editorDestroyed: function(){
               if(this.widget) {
                   this.widget.destroy({remove:true});
               }
           },

           //-------
           // After this View is displayed,
           //    setup the widget to display the current cell's Date value
           //-------
           editorShow: function(o){
               var val = o.value;

               // Display the widget, and select the date (if valid)
               if(this.widget) {
                   this.widget.show();

                   if(Y.Lang.isDate(val)) {
                       this.widget.set('date',val);
                       this.widget.selectDates(val);
                   }
               }

               // Update the INPUT[text] value with date and set it's focus
               this._setInputValue(val);
               o.inputNode.focus();
           },

           //-------
           // After this View is hidden,
           //    hide the Calendar widget to avoid bleed-thru
           //-------
           editorHide: function(){
               if(this.widget) {
                   this.widget.hide();
               }
           },

           //-------
           // After this View is hidden,
           //    hide the Calendar widget to avoid bleed-thru
           //-------
           editorSave: function(){
               if(this.widget) {
                   this.widget.hide();
               }
           }
       }
   };

PLEASE NOTE: All other attributes from the BaseViewClass apply and can be included within the editorConfig object.