<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">

  <title>paper-date-picker Demo</title>

  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>

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

  <style is="custom-style">
    section {
      margin: 24px;
    }
    h3 {
      text-align: center;
    }
    #container {
      margin: 0 auto;
      height: 300px;
      width: 300px;
      overflow: hidden;
      border: 4px solid #eee;
      padding: 5px;
      resize: both;
    }
  </style>
</head>
<body unresolved>
  <template is="dom-bind" id="scope">
    <h3>{{dateFormat(date, 'LLL')}}</h3>
    <section>
      <div id="container" on-track="track">
        <paper-calendar id="picker" date="{{date}}"></paper-calendar>
      </div>
    </section>
  </template>
  <script>
    HTMLImports.whenReady(function() {
      var scope = Polymer.dom(document).querySelector('#scope');
      scope.dateFormat = function(date, format) {
        if (!date) {
          return 'No date selected';
        }
        return moment(date).format(format);
      };
      scope.date = new Date(2017, 3, 13);
      scope.track = function() {
        this.$.picker.fire('iron-resize');
      };
    });
  </script>
</body>
</html>
