things-date-picker-dialog.html

<!--
@license
Copyright © HatioLab Inc. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">

<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../paper-dialog/paper-dialog.html">
<link rel="import" href="../paper-date-picker/paper-date-picker.html">
<link rel="import" href="../paper-date-picker/paper-date-picker-dialog-style.html">

<!--
  Date Picker Dialog
-->

<dom-module id="things-date-picker-dialog">
  <template>
    <paper-dialog 
      modal
      always-on-top
      id="date-dialog"
      class="paper-date-picker-dialog"
      no-cancel-on-esc-key="[[noCancelOnEscKey]]">

      <paper-date-picker 
        id="date-picker"
        locale="[[locale]]" 
        date="{{date}}"
        min-date="{{minDate}}" 
        max-date="{{maxDate}}">
      </paper-date-picker>

      <div class="buttons">
        <paper-button raised dialog-confirm on-tap="selectDate">Select</paper-button>
        <paper-button raised dialog-dismiss>Cancel</paper-button>
      </div>
    </paper-dialog>
  </template>
  
  <script>
    Polymer({
      is: 'things-date-picker-dialog',

      properties: {
        /**
         * Date picker의 기준이 되는 locale을 설정한다.
         */
        locale: {
          type: String,
          value: 'en'
        },

        /**
         * date의 읽기전용 format을 설정한다.
         */
        readFormat: {
          type: String,
          value: 'YYYY-MM-DD'
        },

        /**
         * date의 쓰기전용 format을 설정한다.
         */
        writeFormat: {
          type: String,
          value: 'YYYY-MM-DD'
        },

        /**
         * 달력 다이얼로그에서 사용할 옵션들을 추출하여 설정하는데 사용
         * 다이얼로그에서 선택되어야 할 날짜, 최소 선택 가능한 날짜, 최대 선택 가능한 날짜 등 
         */
        dataObj: {
          type: Object,
          observer: '_dataObjChanged'
        },

        /**
         * formatting 이전의 Date
         */
        date: {
          type: String
        },

        /**
         * 최소 Limit 일자 
         */
        minDate: {
          type: Date
        },

        /**
         * 최대 Limit 일자 
         */
        maxDate: {
          type: Date
        },

        /**
         * open 함수에서 초기화 되며 selectDate 함수에서 실행 합니다.
         */
        callback: {
          type: Function
        },

        /**
         * Set to true to disable canceling the overlay with the ESC key.
         * True로 설정시 cancel dialog에서 ESC key로 꺼지지 않음
         * @type {Boolean}
         */
        noCancelOnEscKey: {
          type: Boolean,
          value: false
        }
      },

      /**
       * dataObj가 변경했다면 ...
       *******
       * @param {Object} dataObj
       */
      _dataObjChanged: function(dataObj) {
        if(dataObj != null) {
          this.minDate = dataObj.minDate ? dataObj.minDate : null;
          this.maxDate = dataObj.maxDate ? dataObj.maxDate : null;
          var dt = dataObj.date;
          this.date = !dt ? new Date() : ((typeof(dt) == 'object') ? dt : new Date(dt));
        } else {
          this.date = new Date();
        }
      },

      /**
       * callback 함수와 dataObj로 부터 Date Picker 다이얼로그를 오픈하는 함수 
       *
       * @param {Object} dataObj
       * @param {Function} callback
       */
      open: function(dataObj, callback) {
        this.dataObj = dataObj;
        this.callback = callback;
        this.$['date-dialog'].open();
      },

      /**
       * date-picker-dialog close
       */
      close: function() {
        this.$['date-dialog'].close();
      },

      /**
       * date-picker의 dialog에서 date를 선택하고 해당 date를 formatting 합니다.
       * callback 함수가 있을경우 callbakc함수를 호출 합니다.
       */
      selectDate: function() {
        if(this.dataObj) {
          this.dataObj['date'] = this.formatting(this.date);
          if(this.callback) this.callback.apply(this.dataObj.owner, [this.dataObj]);
        }
      },

      /**
       * date를 iso 표준의 string으로 변환 후 locale, readFormat를 바탕으로 formatting 합니다.
       *
       * @param {Object} date
       */
      formatting: function(date) {
        if(date) {
          var dt = (typeof(date) == 'object') ? moment(date).format(this.readFormat) : date;
          return moment(dt).locale(this.locale).format(this.readFormat);
        } else {
          return null
        }
      },

      /**
       * Date Dialog
       */
      getDialog: function() {
        return this.$['date-dialog'];
      }
    });
  </script>
</dom-module>