Datetime Local Input Component

Datetime Local Input component is an input field for capturing day, month, year, hour, and minute time data from user. Bissetii did a number of researches on its own and decided to only provide styling for proper HTML5 semantic syntax defined by w3.org.

This component is available starting from v1.12.1.

Hugo

All Datetime Local Input Hugo interface is directly supported by Form Component.

Go

All Datetime Local Input Go interface is directly supported by Form Component.

HTML

Expanding from Form Component, Datetime Local Input component is to facilitate selecting a date and time together. Depending on brower support, should the browser fails to facilitate a datepicker user interface, the field will gracefully fallback to <input type="text">.

To ensure the data is working, ALWAYS facilitate the following pattern just in case the fallback happens.

1

[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}

An all compatible attributes HTML syntax is shown as follows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<label for="input-javascript-id">Date and Time</label>
<input type="datetime-local"
	id="input-javascript-id"
	name="example"
	value="2016-06-01"
	pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}"
	required
	disabled
	autofocus
	autocomplete
	readonly
	list="datalist-id"
/>
<datalist id="datalist-id">
	<option value="2018-06-12T19:30" label="12 June 2018, 19:30" />
	...
</datalist>

Here is an example:

CSS

All Datetime Local Input CSS variables is directly supported by Form Component.

Javascript

All Datetime Local Input Javascript is directly supported by Form Component.

Sass

All Datetime Local Input Sass is directly supported by Form Component.

Researches

Here are the researches done to ensure Datetime Local Input component meets the necessary quality assurances:

SCHEDULED COMING SOON

Epilogue

That’s all about Datetime Local Input component in Bissetii. If you need more feature or need to report a bug, please feel free to file an issue at our Issue Section.