caribou-datepicker.html

<link rel="import" href="../polymer/polymer-element.html">
<link rel="import" href="../paper-input/paper-input-container.html">
<link rel="import" href="../paper-input/paper-input-error.html">
<link rel="import" href="../paper-icon-button/paper-icon-button.html">
<link rel="import" href="../iron-dropdown/iron-dropdown.html">
<link rel="import" href="caribou-date-input.html">
<link rel="import" href="caribou-datepicker-custom-icons.html">
<link rel="import" href="caribou-datepicker-overlay.html">

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

      [slot=dropdown-content] {
        border-radius: 3px;
        box-shadow: 0px 2px 6px #ccc;
      }

      #calendarIcon {
        @apply --input-calendar-icon;
      }
    </style>

    <paper-input-container id="inputContainer" always-float-label attr-for-value="value" invalid="[[invalid]]">
      <label slot="label">{{label}}</label>
      <caribou-date-input class="paper-input-input" slot="input" invalid-date="{{invalid}}" date-d="{{date}}" date-m="{{month}}"
        date-y="{{year}}" format="[[dateFormat]]"></caribou-date-input>
      <paper-icon-button id="calendarIcon" slot="suffix" on-tap="open" icon="caribou-datepicker-icons:calendar"></paper-icon-button>
      <paper-input-error slot="add-on">{{errorMessage}}</paper-input-error>
    </paper-input-container>

    <iron-dropdown id="dropdown">
      <div slot="dropdown-content">
        <caribou-datepicker-overlay id="datepickerOverlay" horizontal="[[horizontal]]" day="[[day]]" date="[[date]]" month="[[month]]"
          year="[[year]]"></caribou-datepicker-overlay>
      </div>
    </iron-dropdown>

  </template>

  <script>
    /**
     * `caribou-datepicker`
     * Polymer 2 element used to select a date with a picker following material design guidelines
     *
     * Material design: [Pickers](https://material.io/guidelines/components/pickers.html#pickers-usage)
     *
     * This element is a single line text field following the material design,
     * and allow you to select a date from an overlay selector.
     *
     * ```html
     * <caribou-datepicker label="My date picker input label"></caribou-datepicker>
     * ```
     *
     * It may include an optional error message
     *
     * ```html
     * <caribou-datepicker label="My date picker input label" error-message="Not valid dude !"></caribou-datepicker>
     * ```
     *
     * By default the date will be displayed following DD-MM-YYYY, but it can be updated :
     *
     * ```html
     * <caribou-datepicker label="My date picker input label" date-format="YMD"></caribou-datepicker>
     * ```
     *
     * By default no value will be set on the input, but it can be initialized with the current date :
     *
     * ```html
     * <caribou-datepicker label="My date picker input label" date-format="YMD" init-with-current-date></caribou-datepicker>
     * ```
     *
     * Also you can set the date directly :
     *
     * ```html
     * <caribou-datepicker label="My date picker input label" date-format="YMD" year="2018" month="1" date="1"></caribou-datepicker>
     * ```
     *
     * You can choose the picker disposition : horizontal or vertical.
     * By default it will be displayed vertically, but by added the horizontal property it will be changed.
     *
     * ```html
     * <caribou-datepicker label="My date picker input label" date-format="YMD" year="2018" month="1" date="1" horizontal></caribou-datepicker>
     * ```
     *
     * ### Styling The following custom properties and mixins are available for styling:
     *
     * Custom property | Description | Default
     * ----------------|-------------|----------
     * `--input-calendar-icon`| Mixin to customize the input calendar icon | `{}`
     *
     *
     * @memberof Caribouflex
     * @customElement
     * @polymer
     * @demo demo/index.html
     * @element caribou-datepicker
     */
    class DatepickerElement extends Polymer.Element {
      static get is() {
        return 'caribou-datepicker';
      }

      static get properties() {
        return {

          /**
           * Label of the input.
           * This is always a floating label.
           */
          label: {
            type: String,
            value: "Date"
          },

          /**
           * The error message if the date is invalid
           */
          errorMessage: {
            type: String,
            value: "Invalid date"
          },

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

          /**
           * The date value
           */
          date: Number,

          /**
           * The month value
           * 1-12
           */
          month: Number,

          /**
           * The year value
           */
          year: Number,

          /**
           * The day value
           */
          day: Number,

          /**
           * Used to indicate if the picker should be close when a date is selected
           * If true, selected a date will automatically change the input value, and close the picker.
           * Warning : If true, the setInputOnDateSelection property is true by default.
           */
          closePickerOnDateSelection: {
            type: Boolean,
            value: false
          },

          /**
           * This will set the input when a date is selected, but this will not close the picker.
           */
          setInputOnDateSelection: {
            type: Boolean,
            value: false
          },

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

          /**
           * Used to display the picker horizontally
           * This can be usefull on mobile landscape.
           */
          horizontal: {
            type: Boolean,
            value: false
          },

          /**
           * If true this will initialize the input with the current date,
           * Only if there is no value bind already.
           */
          initWithCurrentDate: {
            type: Boolean,
            value: false,
            observer: "_setCurrentDate"
          }
        }
      }

      ready() {
        super.ready();
        this.$.datepickerOverlay.addEventListener("date-selected", this._setDateInput.bind(this));
        this.$.datepickerOverlay.addEventListener("ok-clicked", this._setDateInput.bind(this));
        this.$.datepickerOverlay.addEventListener("close-overlay", this.closeOverlay.bind(this));
      }

      static get observers() {
        return [
          "_setDay(date, month, year)"
        ];
      }

      /**
       * This function is used to open the overlay. 
       */
      open() {
        if (this.year === undefined || this.month === undefined || this.date === undefined) {
          this.$.datepickerOverlay.initCurrentDate();
        }
        this.$.dropdown.open();
      }

      _setDay(date, month, year) {
        if (date !== undefined && month !== undefined && year !== undefined) {
          var dateObj = new Date(year, month - 1, date);
          this.day = dateObj.getDay();
        }
      }

      _setDateInput(e) {

        if (e.type == "date-selected" && !this.closePickerOnDateSelection && !this.setInputOnDateSelection)
          return;

        this.month = e.detail.month;
        this.year = e.detail.year;
        this.date = e.detail.date;

        if (e.type == "date-selected" && !this.closePickerOnDateSelection)
          return;

        this.closeOverlay();
      }


      _setCurrentDate(initWithCurrentDate) {
        if (initWithCurrentDate && this.date === undefined && this.month === undefined && this.year === undefined) {
          this.initCurrentDate();
        }
      }

      /**
       * This function is used to set the current date.
       */
      initCurrentDate() {
        var today = new Date();
        this.day = today.getDay();
        this.month = today.getMonth();
        this.year = today.getFullYear();
        this.date = today.getDate();

      }

      /**
       * This function is used to close the overlay.
       */
      closeOverlay() {
        this.$.dropdown.close();
      }
    }

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

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