Source: ui/input/DateComponent.js

// Copyright 2012 Tart. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.



/**
 * @fileoverview This component displays the date entered in a predefined date format and returns that date's value in
 * milliseconds format when asked. If the entered value is not suitable, getDateTime function returns 'NaN' value.
 */

goog.provide('tart.ui.input.DateComponent');
goog.require('goog.events.EventTarget');
goog.require('tart.ui.DlgComponent');



/**
 * Date component.
 * @extends {tart.ui.DlgComponent}
 * @constructor
 */
tart.ui.input.DateComponent = function() {
    goog.base(this);
};
goog.inherits(tart.ui.input.DateComponent, tart.ui.DlgComponent);


/**
 * Returns the date in Date format.
 * @return {Date} date in Date format.
 */
tart.ui.input.DateComponent.prototype.getDateTime = function() {
    var dateInputArea = this.getChild(this.mappings.INPUT)[0];
    var dateInput = dateInputArea.value;
    var formattedDateString = dateInput.slice(3, 5) + '/' + dateInput.slice(0, 2) + '/' +
    dateInput.slice(5, dateInput.length);
    return new Date(formattedDateString);
};


/**
 * Reformats the text entered, in order to display it in a visual style adjusted with predefined style.
 *
 * @param {goog.events.BrowserEvent} e keyPress Event.
 */
tart.ui.input.DateComponent.prototype.onKeyPress = function(e) {
    var dateInputArea = this.getChild(this.mappings.INPUT)[0];
    var textToChange = dateInputArea.value;
    textToChange = textToChange.replace(/^(\d{1,1}\/)/, '0$1');
    textToChange = textToChange.replace(/(\/)(\d{1,1})(\/)/, '$10$2');
    textToChange = textToChange.replace(/[^\d]/g, '');
    textToChange = textToChange.replace(/^(\d{0,2})(\d{0,2})(\d{0,4})(\d{0,})/g, '$1/$2/$3');
    textToChange = textToChange.replace(/\/{0,}$/, '');
    dateInputArea.value = textToChange;
};


/**
 * Cleans the text area if no text entrance was made.
 */
tart.ui.input.DateComponent.prototype.onFocusIn = function() {
    var dateInputArea = this.getChild(this.mappings.INPUT)[0];
    if (dateInputArea.value == 'GG/AA/YYYY')
        dateInputArea.value = '';
};


/**
 * Dispatches an event after focusOut action which carries the date in milliseconds.
 */
tart.ui.input.DateComponent.prototype.onFocusOut = function() {
    var dateInputArea = this.getChild(this.mappings.INPUT)[0];
    if (dateInputArea.value == '')
        this.resetInputArea();
};


/**
 * Resets the text area, date string and formatted date string parameters.
 */
tart.ui.input.DateComponent.prototype.resetInputArea = function() {
    var dateInputArea = this.getChild(this.mappings.INPUT)[0];
    dateInputArea.value = 'GG/AA/YYYY';
};


/**
 * Constructs the base template
 * @return {string} base template.
 */
tart.ui.input.DateComponent.prototype.templates_base = function() {
    return '<span id="' + this.id + '">' +
        '<input name="dateInput" type="text" class="textForm numberOnly dateInput dateInputArea" minlength="1" ' +
        'maxlength="10" value="GG/AA/YYYY"/>' +
        '</span>';
};


/**
 * DateComponent domMappings.
 * @enum {string}
 */
tart.ui.input.DateComponent.prototype.mappings = {
    INPUT: '.dateInput'
};


(function() {
    var proto = tart.ui.input.DateComponent.prototype;
    proto.events = {};
    var focusIn = proto.events[goog.events.EventType.FOCUSIN] = {};
    focusIn[proto.mappings.INPUT] = proto.onFocusIn;
    var focusOut = proto.events[goog.events.EventType.FOCUSOUT] = {};
    focusOut[proto.mappings.INPUT] = proto.onFocusOut;
    var keyup = proto.events[goog.events.EventType.KEYUP] = {};
    keyup[proto.mappings.INPUT] = proto.onKeyPress;
})();