Date input field with polymer?
Does anyone have a recommendation for a date input element using Polymer. Something more user-friendly than the number of combo boxes
The Polymer-Date-Picker project has an issue with multiple input fields on the same page ( which I reported )
+3
source to share
1 answer
A possible starting point is to migrate the existing library of date input fields within the Polymer element.
Here's a Live Demo wrapping Pikaday , a lightweight and customizable JavaScript datepicker, within a custom Polymer element.
Pay attention to the comments in the example 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 simply tweak the date options and settings as you see fit.
Many thanks to Ampersand JS Toolkit for introducing me to Pikaday and RawGit for hosting Pikaday Assets.
Hooray!
+6
source to share