Expand
title	Expand for table of Content
order	update
Table of Contents
outline	true
style	square
Description

Status

colour	Yellow
title	Ongoing
Date and time pickers allow users to select a single or a range of dates and times.
Expand
title	Expand for more info
order	update
TBD
Related items:

Lorem ipsum dolor si
Behavior

TBD
Content guidelines

TBD
Current appearances in our products

Expand
title	Expand to view products and screenshots
order	update
New LUX design

TBD - Open issues

xxxxx
xxxxx
xxxxx
Deceissiond Made

xxxxx
xxxxx
xxxxx
Next Steps / Tasks

xxxxx
Html macro
sanitize	false
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/fonts/css/verint_lux.css">
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script> 
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/other/prism.min.js"></script> 
<link rel="stylesheet" href="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<script src="http://bfs-eng-de-03.kana-test.com/bootstrap-4.0.0/dist/other/prism-hide.js"></script>
			

<div class="card">
			<div class="card-header">Date Picker <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" disabled>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" disabled></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" readonly>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" readonly></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="date" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="card">
			<div class="card-header">Time Picker</div>
			<div class="card-body">
				<form>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" disabled>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" disabled></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" disabled></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" readonly>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" readonly></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly>
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm" placeholder="Guiding Text" value="Filled Text" readonly></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text"></script></code></pre>
						</div>
					</div>
					<div class="form-group row">
						<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm"></label>
						<div class="col-lg-4">
							<input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text">
						</div>
						<div class="col-lg-6">
							<pre class="language-html"><code><script type="prism-html-markup"><input type="time" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="Filled Text"></script></code></pre>
						</div>
					</div>
				</form>
			</div>
		</div>
...
Version	Old Version 1	New Version 2
Changes made by	Femi	Femi
Saved on	Dec 02, 2018	Dec 03, 2018
Content Comparison

Versions Compared

Key

Description

Related items:

Behavior

Content guidelines

Current appearances in our products

New LUX design

TBD - Open issues

Deceissiond Made

Next Steps / Tasks
