caribou-date-input.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../iron-input/iron-input.html">
<link rel="import" href="../iron-validatable-behavior/iron-validatable-behavior.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">

<dom-module id="caribou-date-input">
    <template>
        <style>
            :host {
                display: inline-block;
            }

            :host([hidden]) {
                display: none !important;
            }

            input {
                font: inherit;
                outline: none;
                box-shadow: none;
                border: none;
                width: auto;
                text-align: center;
                width: 55px;
            }

            .container {
                @apply --layout-horizontal;
            }
        </style>

        <template is="dom-if" if="{{__isDMY}}">
            <div class="container">
                <iron-input bind-value="{{_sDateD}}" aria-label="2 digits of the Date">
                    <input max="31" min="1" size="2" type="number" placeholder="DD">
                </iron-input>
                /
                <iron-input bind-value="{{_sDateM}}" aria-label="2 digits of the Month">
                    <input max="12" min="1" size="2" type="number" placeholder="MM">
                </iron-input>
                /
                <iron-input bind-value="{{dateY}}" aria-label="4 digits of the Year">
                    <input min="1900" size="4" type="number" placeholder="YYYY">
                </iron-input>
            </div>
        </template>
        <template is="dom-if" if="{{__isYMD}}">
            <div class="container">
                <iron-input bind-value="{{dateY}}" aria-label="4 digits of the Year">
                    <input min="1900" size="4" type="number" placeholder="YYYY">
                </iron-input>
                /
                <iron-input bind-value="{{_sDateM}}" aria-label="2 digits of the Month">
                    <input max="12" min="1" size="2" type="number" placeholder="MM">
                </iron-input>
                /
                <iron-input bind-value="{{_sDateD}}" aria-label="2 digits of the Date">
                    <input max="31" min="1" size="2" type="number" placeholder="DD">
                </iron-input>
            </div>
        </template>
        <template is="dom-if" if="{{__isMDY}}">
            <div class="container">
                <iron-input bind-value="{{_sDateM}}" aria-label="2 digits of the Month">
                    <input max="12" min="1" size="2" type="number" placeholder="MM">
                </iron-input>
                /
                <iron-input bind-value="{{_sDateD}}" aria-label="2 digits of the Date">
                    <input max="31" min="1" size="2" type="number" placeholder="DD">
                </iron-input>
                /
                <iron-input bind-value="{{dateY}}" aria-label="4 digits of the Year">
                    <input min="1900" size="4" type="number" placeholder="YYYY">
                </iron-input>
            </div>
        </template>
    </template>

    <script>
        /**
         * `caribou-date-input`
         *
         * This element is a single line text field following the material design, used to display a date.
         *
         * This allow you to set the format of the input : DMY, YMD, MDY
         * ```html
         * <caribou-date-input date-format="YMD"></caribou-date-input>
         * ```
         * 
         * @memberof Caribouflex
         * @customElement
         * @polymer
         * @appliesMixin Polymer.IronValidatableBehavior
         * @element caribou-date-input
         */
        class DateInputElement extends Polymer.mixinBehaviors([Polymer.IronValidatableBehavior], Polymer.Element) {
            static get is() {
                return 'caribou-date-input';
            }

            static get properties() {
                return {

                    /**
                     * This is string date that will be inserted into the input.
                     * All the number under 10 will be preceded by a 0. (ex: 01)
                     */
                    _sDateD: {
                        type: String,
                        observer: "_setDateD"
                    },

                    /**
                     * This is string month that will be inserted into the input.
                     * All the number under 10 will be preceded by a 0. (ex: 01)
                     */
                    _sDateM: {
                        type: String,
                        observer: "_setDateM"
                    },

                    /**
                     * This is string year that will be inserted into the input.
                     */
                    _sDateY: {
                        type: String
                    },

                    /**
                     * This is the real date number value
                     */
                    dateD: {
                        type: Number,
                        notify: true,
                        observer: "_set_sDateD"
                    },

                    /**
                     * This is the real month number value
                     */
                    dateM: {
                        type: Number,
                        notify: true,
                        observer: "_set_sDateM"
                    },

                    /**
                     * This is the real year number value
                     */
                    dateY: {
                        type: Number,
                        notify: true
                    },

                    /**
                     * True if the date is invalid.
                     * False otherwise
                     */
                    invalidDate: {
                        type: Boolean,
                        value: false,
                        notify: true
                    },

                    /**
                     * This is the format of the date for the input.
                     * Possible values : 
                     *  - DMY
                     *  - YMD
                     *  - MDY
                     */
                    format: {
                        type: String,
                        value: "DMY",
                        observer: "_initFormat"
                    },

                    /**
                     * Property used to display the view DD/MM/YYYY
                     */
                    __isDMY: {
                        type: Boolean,
                        value: false,
                        readOnly: true
                    },

                    /**
                     *  Property used to display the view YYYY/MM/DD
                     */
                    __isYMD: {
                        type: Boolean,
                        value: false,
                        readOnly: true
                    },

                    /**
                     *  Property used to display the view MM/DD/YYYY
                     */
                    __isMDY: {
                        type: Boolean,
                        value: false,
                        readOnly: true
                    }
                }
            }

            static get observers() {
                return [
                    "_computeValue(dateD, dateM, dateY)"
                ];
            }

            /**
             * Observer function called to valide the date everytime the input change
             * @param {Number} dateD The date
             * @param {Number} dateM The month
             * @param {Number} dateY The year
             * @private
             */
            _computeValue(dateD, dateM, dateY) {
                if (dateD !== undefined && dateM !== undefined && dateY !== undefined) {
                    this._validDate();
                }
            }

            /**
             * Function called to valide the date
             * @return {Boolean} True if valid false otherwise
             * @private
             */
            _validDate() {
                var date = new Date(this.dateY, this.dateM - 1, this.dateD);
                if (this.dateY < 1900 || !date || (date.getMonth() + 1) != this.dateM) {
                    this.invalidDate = true;
                } else
                    this.invalidDate = false;

                return this.invalidDate;
            }

            /**
             * Init the view
             * @param {String} format The string format
             * @private
             */
            _initFormat(format) {
                switch (format) {
                    case "DMY":
                        this._set__isDMY(true);
                        this._set__isYMD(false);
                        this._set__isMDY(false);
                        break;
                    case "YMD":
                        this._set__isYMD(true);
                        this._set__isDMY(false);
                        this._set__isMDY(false);
                        break;
                    case "MDY":
                        this._set__isMDY(true);
                        this._set__isYMD(false);
                        this._set__isDMY(false);
                        break;
                    default:
                        this.format = "DMY";
                }
            }

            /**
             * Observer function used to init the date value when the input value change
             * @param {String} value The input date value
             * @private
             */
            _setDateD(value) {
                this.dateD = Number(value);
            }

            /**
             * Observer function used to init the date value when the input value change
             * @param {String} value The input month value
             * @private
             */
            _setDateM(value) {
                this.dateM = Number(value);
            }

            /**
             * Observer function used to init the string date value when the real selected date change
             * @param {String} value The date value
             * @private
             */
            _set_sDateD(value) {
                this._sDateD = (value < 10 ? '0' : '') + value;
            }

            /**
             * Observer function used to init the string month value when the real selected month change
             * @param {String} value The month value
             * @private
             */
            _set_sDateM(value) {
                this._sDateM = (value < 10 ? '0' : '') + value;
            }
        }

        window.customElements.define(DateInputElement.is, DateInputElement);

        /**
         * @namespace Caribouflex
         */
        window.Caribouflex = window.Caribouflex || {};
        window.Caribouflex.DateInputElement = DateInputElement;
    </script>
</dom-module>