Directory

← Back

datetime-input

an input for date and time

Author

Rating

Popularity

<100

Published on NPM Published on webcomponents.org

API & Demo

<datetime-input>

An input for date and time.

If you are looking for a picker for date and time, please have a look at datetime-picker.

Example

  <input type="checkbox" checked="{{withTimezone::change}}">with timezone<br><br>
  <datetime-input value="{{value}}" default="2022-06-02T11:12:13" datetime="{{datetime}}" date="{{date}}" time="{{time}}" with-timezone="{{withTimezone}}" timezone="{{timezone}}"></datetime-input><br><br>
  <date-input date="{{date}}" timezone="[[timezone]]"></date-input><br><br>
  <time-input time="{{time}}" timezone="[[timezone]]" with-timezone="{{withTimezone}}"></time-input>
  <p>
    <code>datetime:</code>&#32;<b>[[datetime]]</b><br>
    <code>date:</code>&#32;<b>[[date]]</b><br>
    <code>time:</code>&#32;<b>[[time]]</b><br>
    <code>value:</code>&#32;<b>[[value]]</b>
  </p>

Use locale date formats

The properties date, time, datetime are always in iso8061 but the visualization will be localized. By default your locale date format from window.navigator.language will be used, but you can select another locale:

<p>
  locale:
  <select value="{{locale::change}}">
    <option value=""></option>
    <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>
  </select>
  <br><br>
  <input type="checkbox" checked="{{hour12::change}}">hour12 format
</p>

<p>
  <datetime-input locale="{{locale}}" datetime="{{datetime}}" hour12-format="[[hour12]]"></datetime-input>
</p>

<p>datetime: [[datetime]]</p>

Styling

Have a look at input-picker-pattern#input-shared-style to see how to style the element.

Installation

npm i @fooloomanzoo/datetime-input

License

MIT

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • @fooloomanzoo/input-picker-pattern#^3.0.10
  • @fooloomanzoo/number-input#^3.0.9
  • @fooloomanzoo/property-mixins#^3.0.9
  • @polymer/polymer#^3
Released
2018-11-16
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 3.0+
Browser
Browser Independent

datetime-input - Vaadin Add-on Directory

an input for date and time datetime-input - Vaadin Add-on Directory
[![Published on NPM](https://img.shields.io/npm/v/@fooloomanzoo/datetime-input.svg)](https://www.npmjs.com/package/@fooloomanzoo/datetime-input) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/@fooloomanzoo/datetime-input) _[API & Demo](https://fooloomanzoo.github.io/datetime-input)_ ## \ An input for date and time. If you are looking for a picker for date and time, please have a look at [datetime-picker](https://github.com/fooloomanzoo/datetime-picker). ### Example ```html with timezone





datetime: [[datetime]]
date: [[date]]
time: [[time]]
value: [[value]]

``` #### Use locale date formats The properties `date`, `time`, `datetime` are always in **iso8061** but the visualization will be localized. By default your locale date format from `window.navigator.language` will be used, but you can select another *locale*: ```html

locale:

hour12 format

datetime: [[datetime]]

``` ### Styling Have a look at [input-picker-pattern#input-shared-style](https://github.com/fooloomanzoo/input-picker-pattern#input-shared-style) to see how to style the element. ### Installation ``` npm i @fooloomanzoo/datetime-input ``` ### License [MIT](https://github.com/fooloomanzoo/datetime-input/blob/master/LICENSE.txt)
Online