zdkelt-input-date.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../zdkelt-calendar/zdkelt-calendar.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="../paper-input/paper-input.html">
<link rel="import" href="../paper-styles/paper-styles.html">
<link rel="import" href="moment.html">
<link rel="import" href="icons.html">
<!--
A date picker component, based on `zdkelt-calendar`

version : __1.0.0-rc4__

Example:

    <zdkelt-input-date i18n="fr" value="2016-01-25"></zdkelt-input-date>
-->

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

      .dropdown-content {
        background: white;
      }

      .buttons {
        text-align: right;
      }

      .dropdown-content {
        border: 1px solid lightgray;
        margin-top: 35px;
        @apply --shadow-elevation-2dp;
      }

      paper-icon-button {
        width: 25px;
        padding: 3px;
      }

      .container, .btns {
        display: flex;
        flex-direction: row;
      }

    </style>

    <div class="container">
      <paper-input label="[[label]]" id="inputDate" value="{{_displayValue}}" no-label-float="[[noLabelFloat]]" error-message="[[errorMessage]]"
        invalid="{{invalid}}" on-change="_checkEvent">
        <div class='btns' slot="suffix">
          <paper-icon-button suffix id="clear" disabled icon="zdkicons:clear" on-tap="_clear"></paper-icon-button>
          <paper-icon-button suffix id="showcal" icon="zdkicons:event" on-tap="_showCalendar"></paper-icon-button>
        </div>
      </paper-input>
    </div>
    <iron-dropdown id="dropdown" vertical-align="[[verticalAlign]]" horizontal-align="[[horizontalAlign]]" entryAnimation="scale-up-animation">
      <div class="dropdown-content" slot="dropdown-content">
        <zdkelt-calendar id="calendar" value="{{value}}" on-change="_setNewValue" i18n="[[i18n]]"></zdkelt-calendar>
        <div class="buttons">
          <slot></slot>
        </div>
      </div>
    </iron-dropdown>
  </template>

  <script type="text/javascript">
    /**
     * @polymer
     * @customElement
     * @demo demo/index.html
     */
    class ZdkEltInputDate extends Polymer.mixinBehaviors([], Polymer.Element) {
      static get is() {
        return 'zdkelt-input-date'
      }

      static get properties() {
        return {
          /**
           * Define the value of the component
           */
          value: {
            type: String,
            reflectToAttribute: true,
            value: '',
            notify: true,
            observer: '_valueChanged',
          },
          /**
           * The displayed date in the locale format
           */
          _displayValue: {
            type: String,
          },
          /**
           * The field label
           */
          label: String,
          /**
           *
           */
          noLabelFloat: {
            type: Boolean,
            reflectToAttribute: true,
            value: false,
          },
          /**
           * indicate if the value is invalid
           */
          invalid: {
            type: Boolean,
            reflectToAttribute: true,
            notify: true,
          },

          _dateValid: {
            type: Boolean,
            value: false,
          },

          /**
           * Define the current locale
           *
           * if no locale is given, the locale is extract from the browser preferences
           */
          i18n: {
            type: String,
            value: () => window.navigator.userLanguage || window.navigator.language,
            observer: '_i18nChanged',
          },
          /**
           * The orientation against which to align the dropdown content vertically
           * relative to the dropdown trigger.
           * acceptable value are "top" or "bottom"
           */
          verticalAlign: {
            type: String,
            value: 'top',
          },
          /**
           * The orientation against which to align the dropdown content horizontally
           * relative to the dropdown trigger.
           * acceptable value are "left" or "right"
           */
          horizontalAlign: {
            type: String,
            value: 'left',
          },
          /**
           * Define the size of the dropdown calendar
           */
          size: Number,
          /* Define the selectable minimal date ( format : YYYY-MM-DD ) */
          minDate: {
            type: String,
            observer: '_minDateChanged',
          },
          /* Define the selectable maximal date ( format : YYYY-MM-DD ) */
          maxDate: {
            type: String,
            observer: '_maxDateChanged',
          },
          /**
           * The error message to disaply if the value is invalid
           */
          errorMessage: {
            type: String,
            value: '',
            notify: true,
          },
        }
      }

      /**
       * @protected
       */
      connectedCallback() {
        super.connectedCallback()
        this._onDialogClick = this._onDialogClick.bind(this)
        this.addEventListener('click', this._onDialogClick, { passive: true })
      }

      _onDialogClick(event) {
        var target = event.target
        while (target && target !== this) {
          if (target.hasAttribute) {
            if (target.hasAttribute('dropdown-dismiss')) {
              this.$.dropdown.close()
              break
            } else if (target.hasAttribute('dropdown-confirm')) {
              moment.locale(this.i18n)
              this.value = this.$.calendar.value
              this._displayValue = moment(this.value, 'YYYY-MM-DD').format('L')
              this.$.dropdown.close()
              this.$.clear.disabled = false
              this._dispatchEvent()
              break
            }
          }
          target = target.parentNode
        }
      }

      _dispatchEvent() {
        /**
         * Fired when the element changes its value.
         * @event change
         * @param {number} detail the new date value.
         */
        this.dispatchEvent(new CustomEvent('change', {detail: this.value}))
      }

      /**
       *
       */
      _dateFormat() {
        moment.locale(this.i18n)
        return moment.localeData()._longDateFormat.L
      }

      /**
       *
       */
      _valueChanged(newValue) {
        if (newValue) {
          moment.locale(this.i18n)
          this.$.clear.disabled = false
          if (!moment(newValue, 'YYYY-MM-DD').isValid()) {
            this._dateValid = false
            this.$.inputDate.invalid = true
            this.invalid = true
            this._displayValue = newValue
            this.value = ''
          } else {
            this._dateValid = true
            if ((this.$.calendar.minDate && newValue < this.$.calendar.minDate) ||
              (this.$.calendar.maxDate && newValue > this.$.calendar.maxDate)) {
              this.$.inputDate.invalid = true
              this.invalid = true
            } else {
              this.value = newValue
              this.$.inputDate.invalid = false
              this.invalid = false
              this._displayValue = moment(this.value, 'YYYY-MM-DD').format('L')
            }
          }
        }
      }
      _i18nChanged(newValue) {
        if (!this.invalid && this.value) {
          this._displayValue = moment(this.value, 'YYYY-MM-DD').format('L')
        }
      }
      /**
       * transform the current value in the ISO format : 'YYYY-MM-DD'
       */
      _formatDate(value) {
        return moment(value).format('YYYY-MM-DD')
      }
      /**
       * Set the minimal acceptable value
       *
       * the date must be in format "YYYY-MM-DD"
       */
      _minDateChanged(newValue) {
        if (moment(newValue, 'YYYY-MM-DD').isValid()) {
          this.$.calendar.minDate = this._formatDate(newValue)
          if (this.value && !this.invalid && this._formatDate(this.value) < this.$.calendar.minDate) {
            this.$.inputDate.invalid = true
            this.invalid = true
          }
        }
      }
      /**
       * Set the maximal acceptable value
       *
       * the date must be in format "YYYY-MM-DD"
       */
      _maxDateChanged(newValue) {
        if (moment(newValue, 'YYYY-MM-DD').isValid()) {
          this.$.calendar.maxDate = this._formatDate(newValue)
          if (this.value && !this.invalid && this._formatDate(this.value) > this.$.calendar.maxDate) {
            this.$.inputDate.invalid = true
            this.invalid = true
          }
        }
      }
      /**
       * Reset the current value
       */
      _clear() {
        this.value = ''
        this._displayValue = ''
        this.$.clear.disabled = true
        this.$.inputDate.invalid = false
      }
      /**
       * Show the dropdown calendar
       */
      _showCalendar() {
        this.$.calendar.value = this.$.inputDate.invalid ? '' : this._formatDate(this.value)
        this.$.calendar.initDate = this.value || moment().format('YYYY-MM-DD')
        if (this.size) {
          this.$.calendar.style.width = this.size + 'px'
          this.$.calendar.style.height = `${this.size * 8 / 7}px`
          this.$.calendar.style.fontSize = ((this.size / 300) * 100) + '%'
        }
        this.$.dropdown.open()
      }
      /**
       * Get the selected value from the calendar and close
       * the dropdown
       */
      _setNewValue() {
        if (this.querySelector('[dropdown-confirm]')) {
          return
        }
        moment.locale(this.i18n)
        this.value = this.$.calendar.value
        this._displayValue = moment(this.value, 'YYYY-MM-DD').format('L')
        this.$.dropdown.close()
        this.$.clear.disabled = false
        this._dispatchEvent()
      }
      /**
       *
       */
      _checkEvent() {
        moment.locale(this.i18n)
        if (this._displayValue &&
          this._displayValue.length === this._dateFormat().length &&
          moment(this._displayValue, this._dateFormat()).isValid()
        ) {
          this.invalid = false
          this._valueChanged(moment(this._displayValue, this._dateFormat()).format('YYYY-MM-DD'))
          this._dispatchEvent()
        } else {
          this.set('invalid', true)
        }
        if (this._displayValue) {
          this.$.clear.disabled = false
        }
      }
    }

    window.customElements.define(ZdkEltInputDate.is, ZdkEltInputDate)
  </script>
</dom-module>