@fooloomanzoo/datetime-input
Version:
an input for date and time
80 lines (74 loc) • 4.2 kB
HTML
<html lang="en">
<head>
<title>datetime-input in iron-Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script>if (!window.customElements) { document.write('<!--'); }</script>
<script src="https://fooloomanzoo.github.io/input-picker-pattern/demo/dist/custom-elements-es5-adapter.js"></script>
<!--! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->
<style>
body {
font-family: 'Roboto', 'Noto', sans-serif;
font-size: 14px;
}
</style>
</head>
<body>
<div class="vertical-section-container centered">
<h3>datetime-input in <code>iron-form</code></h3>
<demo-snippet>
<template>
<dom-bind>
<template>
<label>
<input type="checkbox" checked="" onchange="form1.allowRedirect = !this.checked;">Prevent automatic form redirection<br><br>
<input type="checkbox" checked="{{hour12Format::change}}">hour12 format<br><br>
property for value: <select value="{{propertyForValue::change}}">
<option value="datetime">datetime</option>
<option value="date">date</option>
<option value="time">time</option>
<option value="valueAsNumber" selected="">valueAsNumber</option>
<option value="year">year</option>
<option value="month">month</option>
<option value="day">day</option>
<option value="hour">hour</option>
<option value="minute">minute</option>
<option value="second">second</option>
<option value="millisecond">millisecond</option>
</select>
</label>
<br><br>
<iron-form id="form1">
<form action="/foo" method="get">
name: <input name="name" required="" value="Batman"><br><br>
job: <input name="job" required="" value="Hero"><br>
<p>
first day (required): <date-input name="firstDay" required="" max="[[end]]" value-as-number="{{start}}" property-for-value="[[propertyForValue]]"></date-input><br><br>
expected retirement: <date-input name="expectedRetirement" min="[[start]]" value-as-number="{{end}}" property-for-value="[[propertyForValue]]"></date-input><br><br>
last job (required): <datetime-input name="lastJob" required="" min="[[start]]" max="[[end]]" value-as-number="{{lastjob}}" hour12-format="[[hour12Format]]" property-for-value="[[propertyForValue]]" timezone="{{timezone}}"></datetime-input><br><br>
return: <time-input name="return" min="[[lastjob]]" default="[[lastjob]]" max="[[end]]" hour12-format="[[hour12Format]]" property-for-value="[[propertyForValue]]" timezone="[[timezone]]"></time-input>
</p>
<button onclick="form1.submit()">Submit</button>
<button onclick="form1.validate()">Validate</button>
</form>
<div class="output"></div>
</iron-form>
<script>
form1.addEventListener('iron-form-submit', function(event) {
this.querySelector('.output').innerHTML = JSON.stringify(event.detail);
});
</script>
</template>
</dom-bind>
</template>
</demo-snippet>
</div>
<!-- Load the external helpers to run the code transpiled to ES5 -->
<script src="https://fooloomanzoo.github.io/input-picker-pattern/demo/dist/babel-helpers.min.js"></script>
<!-- Load webcomponents-loader.js to check and load any polyfills your browser needs -->
<script src="https://fooloomanzoo.github.io/input-picker-pattern/demo/dist/webcomponents-loader.js"></script>
<!-- Load bundled dependencies for the demos -->
<script src="./dist/demo-form-import.js"></script>
</body>
</html>