@fooloomanzoo/datetime-input
Version:
an input for date and time
124 lines (117 loc) • 5.71 kB
HTML
<html lang="en">
<head>
<title>datetime-input demo</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>Create a date-input</h3>
<demo-snippet>
<template>
<dom-bind>
<template is="dom-bind">
<input type="checkbox" checked="{{withTimezone::change}}">with timezone<br><br>
<input type="checkbox" checked="{{hour12Format::change}}">hour12 format<br><br>
<input type="checkbox" checked="{{hideResetButton::change}}">hide reset button<br><br>
step: <number-input class="step" no-clamp="" default="1" minlength="2" value="{{step}}"></number-input><br><br>
locale: <input list="locales" value="{{locale::change}}">
<datalist id="locales">
<option value="en">english</option>
<option value="fr">français</option>
<option value="de">deutsch</option>
<option value="es">español</option>
<option value="it">italiano</option>
<option value="ru">русский</option>
<option value="ja">日本語</option>
<option value="zh">中文</option>
</datalist>
<br>
<br>
<datetime-input value="{{value}}" locale="{{locale}}" step="[[step]]" datetime="{{datetime}}" hour12-format="{{hour12Format}}" with-timezone="{{withTimezone}}" timezone="{{timezone}}" hide-reset-button="[[hideResetButton]]"></datetime-input>
<br>
<br>
<date-input value="{{value}}" date="{{date}}" locale="[[locale]]" step="[[step]]" timezone="[[timezone]]" hide-reset-button="[[hideResetButton]]" with-timezone="{{withTimezone}}"></date-input>
<br>
<br>
<time-input value="{{value}}" time="{{time}}" locale="[[locale]]" step="[[step]]" hour12-format="{{hour12Format}}" timezone="[[timezone]]" with-timezone="{{withTimezone}}" hide-reset-button="[[hideResetButton]]"></time-input>
<p>
<code>datetime:</code> <b>[[datetime]]</b><br>
<code>date:</code> <b>[[date]]</b><br>
<code>time:</code> <b>[[time]]</b><br>
<code>value:</code> <b>[[value]]</b>
</p>
</template>
</dom-bind>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Presetting date</h3>
<demo-snippet>
<template>
<dom-bind>
<template is="dom-bind">
<style>
date-input.preset {
--input-color: #111;
--input-background: #d1a861;
--input-border-color: #825d1c;
--inner-input-focus-color: #111;
--inner-input-focus-background: #d1a861;
--inner-input-focus-border-color: #825d1c;
}
time-input.preset {
--input-color: #111;
--input-background: #61b0d1;
--input-border-color: #207395;
--inner-input-focus-color: #111;
--inner-input-focus-background: #61b0d1;
--inner-input-focus-border-color: #207395;
}
</style>
<date-input class="preset" default="2025-02-01T00:00" date="{{date}}"></date-input><br><br>
<time-input class="preset" hour="11" time="{{time}}"></time-input>
<div class="vertical-section-container result">
<div><code>date</code>: <b>[[date]]</b></div>
<div><code>time</code>: <b>[[time]]</b></div>
</div>
</template>
</dom-bind>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Using min and max attributes</h3>
<demo-snippet>
<template>
<dom-bind>
<template is="dom-bind">
<datetime-input min="2025-02-01" max="2035-05-28T22:11:00+04:00" value="{{value}}" datetime="{{datetime}}"></datetime-input>
<div class="vertical-section-container result">
<div><code>datetime</code>: <b>[[datetime]]</b></div>
<div><code>value</code>: <b>[[value]]</b></div>
</div>
</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-index-import.js"></script>
</body>
</html>