Has anyone got any remendations for a date input element with Polymer. Something more user friendly than a number of bobox's
The Polymer-Date-Picker project seems to have an issue with multiple input fields on the same page (which I have reported)
Has anyone got any remendations for a date input element with Polymer. Something more user friendly than a number of bobox's
The Polymer-Date-Picker project seems to have an issue with multiple input fields on the same page (which I have reported)
Share Improve this question asked Oct 25, 2014 at 3:29 mikeyseemikeysee 1,7731 gold badge21 silver badges34 bronze badges1 Answer
Reset to default 6A 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 ments within the example's source code.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://www.polymer-project/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/ponents/polymer/polymer.html">
<polymer-element name="pikaday-element">
<template>
<link rel="stylesheet" href="https://rawgit./dbushell/Pikaday/master/css/pikaday.css">
<input type="text" id="datepicker">
<div id="container"></div>
</template>
<script src="https://rawgit./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!