crdx/chopsui/chops-timestamp.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-tooltip/paper-tooltip.html">
<script src="../moment/min/moment.min.js"></script>
<script src="../moment-timezone/builds/moment-timezone-with-data.min.js"></script>

<dom-module id="chops-timestamp">
  <template>
    <style>
    </style>
    <template is="dom-if" if="[[!short]]">
      [[_fmtDate]] ([[_computeRelativeTime(date)]])
    </template>
    <template is="dom-if" if="[[short]]">
      [[_computeRelativeTime(date)]]
      <paper-tooltip>[[_fmtDate]]</paper-tooltip>
    </template>
  </template>
  <script>
    'use strict';

    /**
     * `<chops-timestamp>` displays a formatted time string in PDT and the relative time.
     *
     * This element shows a time in a human readable form.
     *
     * @customElement
     * @polymer
     * @demo /demo/chops-timestamp_demo.html
     */
    class ChopsTimestamp extends Polymer.Element {
      static get is() { return 'chops-timestamp'; }

      static get properties() {
        return {
          /** The javascript Date object, which is stored in UTC, to be processed. */
          date: Object,
          /** When true, a shorter version of the date will be displayed. */
          short: {
            type: Boolean,
            value: false,
          },
          /** The format of the date. */
          dateFormat: {
            type: String,
            value: "ddd D MMM 'YY, h:mm a z",
          },
          /** The formatted date. */
          _fmtDate: {
            type: String,
            computed: '_computeDisplayedTime(date, dateFormat)',
          },
        }
      }

      _computeDisplayedTime(date, format) {
        return moment(date).tz('America/Los_Angeles').format(format);
      }

      _computeRelativeTime(date) {
        return moment(date).fromNow();
      }

    }
    customElements.define(ChopsTimestamp.is, ChopsTimestamp);
  </script>
<dom-module>