CODEWITHSUNDEEP
javascripthtmlpolymer
mikeysee
mikeysee

Reputation: 1753

Date Input Field with Polymer?

Has anyone got any recommendations for a date input element with Polymer. Something more user friendly than a number of combobox's

The Polymer-Date-Picker project seems to have an issue with multiple input fields on the same page (which I have reported)

Upvotes: 3

Views: 3796

Answers (1)

francisfuzz
francisfuzz

Reputation: 171

A possible starting point is wrapping an existing date-input field library within a Polymer element.

Here's a Live Demo wrapping Pikaday, a lightweight and configurable JavaScript datepicker, within a custom Polymer element.

Note the comments within the example's source code.

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="http://www.polymer-project.org/platform.js"></script>
    <!-- HTML import of the custom `pikaday-element` -->
    <link rel="import" href="pikaday-element.html">
  </head>
  <body>
    <pikaday-element></pikaday-element>
  </body>
</html>

<!-- pikaday-element.html -->
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<polymer-element name="pikaday-element">
  <template>
    <link rel="stylesheet" href="https://rawgit.com/dbushell/Pikaday/master/css/pikaday.css">
    <input type="text" id="datepicker">
    <div id="container"></div>
  </template>
  <script src="https://rawgit.com/dbushell/Pikaday/master/pikaday.js"></script>
  <script>
    Polymer({
      ready: function() {
        var picker = new Pikaday({
          // targets the #datepicker id within the shadow DOM.
          field: this.$.datepicker,
          // targets the #container id within the shadow DOM.
          container: this.$.container,
          // automatically show the datepicker on-load.
          // note: when set to true, it flashes for a brief moment and then hides
          bound: false
        });
      }
    });
  </script>
</polymer-element>

Since this is just a starting point, you can just configure the datepickers and settings as you see fit.

Big thanks to the Ampersand JS Toolkit for introducing me to Pikaday and to RawGit for hosting Pikaday assets.

Cheers!

Upvotes: 6

Related Questions