| <!-- |
| 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> |