res/imp/date-time-picker-sk.html

<!--
  This in an HTML Import-able file that contains the JS and HTML Templates for
  the date-time-picker-sk element.

  To use this file import it:

    <link href="/res/imp/date-time-picker-sk.html" rel="import" />

  Properties:
    value - String/Number; The value of the timestamp.
    format - String; Determines the format of the value; one of: "ISO",
        "seconds", "milliseconds". Default is "milliseconds".

  Methods:
    None.

  Events:
    None.
-->
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="/res/imp/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/res/imp/bower_components/paper-time-picker/paper-time-picker.html">
<link rel="import" href="/res/imp/bower_components/paper-date-picker/paper-date-picker.html">
<link rel="import" href="/res/imp/bower_components/polymer/polymer.html">
<dom-module id="date-time-picker-sk">
  <template>
    <paper-button on-tap="_promptDate" raised>[[_dateStr]]</paper-button>
    <paper-button on-tap="_promptTime" raised>[[_timeStr]]</paper-button>
    <paper-dialog id="date_picker_dialog" modal on-iron-overlay-closed="_setDate">
      <paper-date-picker id="date_picker"></paper-date-picker>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
    </paper-dialog>
    <paper-dialog id="time_picker_dialog" modal on-iron-overlay-closed="_setTime">
      <paper-time-picker id="time_picker"></paper-time-picker>
      <div class="buttons">
        <paper-button dialog-dismiss>Cancel</paper-button>
        <paper-button dialog-confirm>OK</paper-button>
      </div>
    </paper-dialog>
  </template>
  <script>
  (function() {
    var FORMAT_ISO = "ISO";
    var FORMAT_SECONDS = "seconds";
    var FORMAT_MILLISECONDS = "milliseconds";

    Polymer({
      is: "date-time-picker-sk",

      properties: {
        value: {
          value: null,
          notify: true,
        },
        format: {
          type: String,
          value: "milliseconds",
        },

        // Private.
        _date: {
          type: Date,
          value: function() {
            return new Date();
          },
        },
        _dateStr: {
          type: String,
          computed: "_getDateStr(_date)",
        },
        _timeStr: {
          type: String,
          computed: "_getTimeStr(_date)",
        },
      },

      ready: function() {
        if (this.value) {
          this._updateDate();
        } else {
          this._updateValue();
        }
      },

      _updateValue: function() {
        if (this.format === FORMAT_ISO) {
          this.set("value", this._date.toISOString());
        } else if (this.format === FORMAT_SECONDS) {
          this.set("value", Math.round(this._date.getTime() / 1000));
        } else if (this.format === FORMAT_MILLISECONDS) {
          this.set("value", this._date.getTime());
        } else {
          sk.errorMessage("Invalid format for date-time-picker-sk: " + this.format);
        }
      },

      _updateDate: function() {
        if (this.format === FORMAT_ISO) {
          this.set("_date", new Date(this.value));
        } else if (this.format === FORMAT_SECONDS) {
          this.set("_date", new Date(parseInt(this.value * 1000)));
        } else if (this.format === FORMAT_MILLISECONDS) {
          this.set("_date", new Date(parseInt(this.value)));
        } else {
          sk.errorMessage("Invalid format for date-time-picker-sk: " + this.format);
        }
      },

      _getDateStr: function(d) {
        return d.toLocaleDateString();
      },

      _getTimeStr: function(d) {
        return d.toLocaleTimeString();
      },

      _promptDate: function(e) {
        this.$.date_picker.date = this._date;
        this.$.date_picker_dialog.open();
      },

      _promptTime: function(e) {
        this.$.time_picker.date = this._date;
        this.$.time_picker.hour = this._date.getHours();
        this.$.time_picker.minute = this._date.getMinutes();
        this.$.time_picker_dialog.open();
      },

      _setDate: function(e) {
        if (!e.detail.confirmed) {
          return;
        }
        var chosen = this.$.date_picker.date;
        var newDate = new Date(this._date.getTime());
        newDate.setFullYear(chosen.getFullYear());
        newDate.setMonth(chosen.getMonth());
        newDate.setDate(chosen.getDate());
        this.set("_date", newDate);
        this._updateValue();
      },

      _setTime: function(e) {
        if (!e.detail.confirmed) {
          return;
        }
        var newDate = new Date(this._date.getTime());
        newDate.setHours(this.$.time_picker.hour);
        newDate.setMinutes(this.$.time_picker.minute);
        newDate.setMilliseconds(0);
        this.set("_date", newDate);
        this._updateValue();
      },
    });
  }());
  </script>
</dom-module>