Show:
                            var CSS_CELLEDITOR_ELEMENT = A.getClassName('celleditor', 'element'),
                                DateCellEditor;
                            
                            /**
                             * DateCellEditor class.
                             *
                             * @class A.DateCellEditor
                             * @extends A.BaseCellEditor
                             * @param {Object} config Object literal specifying widget configuration
                             * properties.
                             * @constructor
                             */
                            DateCellEditor = A.Component.create({
                            
                                /**
                                 * Static property provides a string to identify the class.
                                 *
                                 * @property NAME
                                 * @type String
                                 * @static
                                 */
                                NAME: 'dateCellEditor',
                            
                                /**
                                 * Static property used to define which component it extends.
                                 *
                                 * @property EXTENDS
                                 * @type Object
                                 * @static
                                 */
                                EXTENDS: A.BaseCellEditor,
                            
                                /**
                                 * Static property used to define the default attribute
                                 * configuration for the `A.DateCellEditor`.
                                 *
                                 * @property ATTRS
                                 * @type Object
                                 * @static
                                 */
                                ATTRS: {
                            
                                    /**
                                     * Defines the content of body.
                                     *
                                     * @attribute bodyContent
                                     * @default ''
                                     * @type String
                                     */
                                    bodyContent: {
                                        value: ''
                                    },
                            
                                    /**
                                     * Defines the `A.Calendar` object used for the `A.DateCellEditor` input.
                                     *
                                     * @attribute calendar
                                     * @default null
                                     * @type Object
                                     */
                                    calendar: {
                                        setter: '_setCalendar',
                                        validator: A.Lang.isObject,
                                        value: null
                                    },
                            
                                    /**
                                     * Defines the `A.DataType.Date` format used in input and output methods
                                     * of the `A.DateCellEditor` input.
                                     *
                                     * @attribute dateFormat
                                     * @default '%Y-%m-%d'
                                     * @type String
                                     */
                                    dateFormat: {
                                        value: '%Y-%m-%d',
                                        validator: A.Lang.isString
                                    },
                            
                                    /**
                                     * Defines the Function which is used in `formatValue` to modify values
                                     * for the `A.DateCellEditor` input.
                                     *
                                     * Default Function iterates and formats values using the `dateFormat`
                                     * attribute.
                                     *
                                     * @attribute inputFormatter
                                     * @type Function
                                     */
                                    inputFormatter: {
                                        value: function(val) {
                                            var instance = this,
                                                values = [];
                            
                                            A.Array.each(val, function(date) {
                                                values.push(instance.formatDate(date).toString());
                                            });
                            
                                            return values;
                                        }
                                    },
                            
                                    /**
                                     * Defines the Function which is used in `formatValue` to modify values
                                     * for the `A.DateCellEditor` input.
                                     *
                                     * Default Function iterates and formats values using the `dateFormat`
                                     * attribute.
                                     *
                                     * @attribute outputFormatter
                                     * @type Function
                                     */
                                    outputFormatter: {
                                        value: function(val) {
                                            var instance = this,
                                                values = [];
                            
                                            A.Array.each(val, function(date) {
                                                values.push(A.DataType.Date.parse(instance.get('dateFormat'), date));
                                            });
                            
                                            return values;
                                        }
                                    }
                                },
                            
                                prototype: {
                                    ELEMENT_TEMPLATE: '<input class="' + CSS_CELLEDITOR_ELEMENT + '" type="hidden" />',
                            
                                    /**
                                     * Construction logic executed during `A.DateCellEditor` instantiation.
                                     * Lifecycle.
                                     *
                                     * @method initializer
                                     * @protected
                                     */
                                    initializer: function() {
                                        var instance = this;
                            
                                        instance.after('calendar:dateClick', A.bind(instance._afterDateSelect, instance));
                                    },
                            
                                    /**
                                     * Gets the `A.DateCellEditor` input value.
                                     *
                                     * @method getElementsValue
                                     * @return {String} Input value.
                                     */
                                    getElementsValue: function() {
                                        var instance = this;
                            
                                        return instance.calendar.get('selectedDates');
                                    },
                            
                                    /**
                                     * Formats the passed `date` using the format define in the `dateFormat`
                                     * attribute.
                                     *
                                     * @method formatDate
                                     * @param {String} date
                                     * @return {String} HTML formatted for display.
                                     */
                                    formatDate: function(date) {
                                        var instance = this,
                                            mask = instance.get('dateFormat'),
                                            locale = instance.get('locale');
                            
                                        return A.DataType.Date.format(date, {
                                            format: mask,
                                            locale: locale
                                        });
                                    },
                            
                                    /**
                                     * Fires after `calendar:dateClick` event. Sets the elements values to
                                     * the selected dates.
                                     *
                                     * @method _afterDateSelect
                                     * @param {EventFacade} event
                                     * @protected
                                     */
                                    _afterDateSelect: function() {
                                        var instance = this,
                                            selectedDates = instance.calendar.get('selectedDates');
                            
                                        instance.elements.val(A.Array.invoke(selectedDates, 'getTime').join(','));
                                    },
                            
                                    /**
                                     * Fires after `render` event.
                                     *
                                     * @method _afterRender
                                     * @protected
                                     */
                                    _afterRender: function() {
                                        var instance = this;
                            
                                        A.DateCellEditor.superclass._afterRender.apply(instance, arguments);
                            
                                        instance.calendar = new A.Calendar(
                                            instance.get('calendar')
                                        ).render(instance.bodyNode);
                                    },
                            
                                    /**
                                     * Sets the calendar attribute.
                                     *
                                     * @method _setCalendar
                                     * @param {Object} val
                                     * @protected
                                     * @return {Object} Merged `A.Calendar` object.
                                     */
                                    _setCalendar: function(val) {
                                        var instance = this;
                            
                                        return A.merge({
                                                bubbleTargets: instance
                                            },
                                            val
                                        );
                                    },
                            
                                    /**
                                     * Places keyboard focus on the first selected date, if any. Otherwise,
                                     * places focus on the default date.
                                     *
                                     * @method _syncElementsFocus
                                     * @protected
                                     */
                                    _syncElementsFocus: function() {
                                        var instance = this,
                                            calendar = instance.calendar,
                                            date = calendar.get('selectedDates')[0];
                            
                                        A.DateCellEditor.superclass._syncElementsFocus.apply(instance, arguments);
                            
                                        if (!date) {
                                            date = calendar.get('date');
                                        }
                            
                                        calendar.focus();
                            
                                        calendar._highlightDateNode(date);
                                    },
                            
                                    /**
                                     * Sets and formats `A.DateCellEditor` `A.Calendar` `date` attribute.
                                     *
                                     * @method _uiSetValue
                                     * @param {Array} val
                                     * @protected
                                     */
                                    _uiSetValue: function(val) {
                                        var instance = this,
                                            calendar = instance.calendar,
                                            formatedValue;
                            
                                        if (calendar) {
                                            if (!A.Lang.isArray(val)) {
                                                val = [val];
                                            }
                            
                                            formatedValue = instance.formatValue(instance.get('outputFormatter'), val);
                            
                                            calendar._clearSelection();
                            
                                            if (formatedValue[0]) {
                                                calendar.set('date', formatedValue[0]);
                                                calendar.selectDates(formatedValue);
                                            }
                                            else {
                                                calendar.set('date', new Date());
                                            }
                                        }
                                    }
                                }
                            });
                            
                            A.DateCellEditor = DateCellEditor;