Is a Polymer 3 input web-component only for date.
Is composed by three component (ordered by dependencies hierarchy):
paper-month-control;paper-calendar;paper-input-datepicker;
All components could be used like web-components (see Demo for the example).
npm install --save @fluidnext-polymer/paper-input-datepicker
<html>
<head>
<script type="module" src="@fluid-next/paper-input-datepicker/paper-input-datepicker.js"></script>
</head>
<body>
<paper-input-datepicker></paper-input-datepicker>
</body>
</html>import {PolymerElement, html} from '@polymer/polymer';
import '@fluid-next/paper-input-datepicker/paper-input-datepicker';
class SampleElement extends PolymerElement {
static get template() {
return html`
<paper-input-datepicker></paper-input-datepicker>
`;
}
}
customElements.define('sample-element', SampleElement);Icons can be customized by importing a different iconset. For example, here is the iconset code imported in the Demo.
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';
const template = html`
<iron-iconset-svg name="paper-input-datepicker" size="24">
<svg><defs>
<g id="clear"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></g>
</defs></svg>
</iron-iconset-svg>
`;
document.head.appendChild(template.content);If you want to send a PR to this element, here are the instructions for running the tests and demo locally:
git clone https://github.com/fluidnext/paper-input-datepicker
cd paper-input-datepicker
npm installOpen terminal in the project root folder and run the following command.
polymer serve --openOpen terminal in the project root folder and run the following command.
polymer testTo see tests details, open the generated "index.html" inside "coverage/lcov-report" folder.