ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Date Picker

yarn add @clayui/date-picker

Date and Time pickers let users select a date and time for a form.

  • Examples
  • Markup
  • API

Stable3.7.0View in LexiconCHANGELOGstorybook demos

  • Example
  • Field
  • Date Picker
  • Time Picker
This requires custom javascript.

Example

The DropDown content of the DatePicker consists of Header, Body and Footer. Footer: You can add elements that complement the Date Picker like the Time Picker.

Copied!
Code Sample (expand to see it)
<div class="date-picker-calendar-header">...</div>
<div class="date-picker-calendar-body">...</div>
<div class="date-picker-calendar-footer">...</div>
S
M
T
W
T
F
S
(GMT+01:00)
Copied!
Code Sample (expand to see it)
<div class="date-picker">
	<div class="input-group">
		<div class="input-group-item">
			<input name="datePicker" type="hidden" value="" />
			<input
				class="form-control input-group-inset input-group-inset-after"
				placeholder="YYYY-MM-DD"
				type="text"
				value=""
			/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button
					class="btn btn-unstyled date-picker-dropdown-toggle"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-calendar"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#calendar" />
					</svg>
				</button>
			</div>
		</div>
	</div>
	<div class="date-picker-dropdown-menu dropdown-menu show">
		<div class="date-picker-calendar">
			<div class="date-picker-calendar-header">
				<div class="date-picker-nav">
					<div class="date-picker-nav-item input-date-picker-month">
						<select class="form-control" disabled="" name="month">
							<option value="0">January</option>
							<option value="1">February</option>
							<option value="2">March</option>
							<option value="3">April</option>
							<option value="4">May</option>
							<option value="5">June</option>
							<option value="6">July</option>
							<option value="7">August</option>
							<option value="8">September</option>
							<option value="9">October</option>
							<option value="10">November</option>
							<option value="11">December</option>
						</select>
					</div>
					<div class="date-picker-nav-item input-date-picker-year">
						<select class="form-control" name="year">
							<option value="1997">1997</option>
							<option value="1998">1998</option>
							...
						</select>
					</div>
					<div
						class="date-picker-nav-item date-picker-nav-item-expand date-picker-nav-controls"
					>
						<button
							aria-label="Select the previous month"
							class="btn nav-btn nav-btn-monospaced"
							disabled=""
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-angle-left"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#angle-left"
								/>
							</svg>
						</button>
						<button
							aria-label="Select current date"
							class="btn nav-btn nav-btn-monospaced"
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-simple-circle"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#simple-circle"
								/>
							</svg>
						</button>
						<button
							aria-label="Select the next month"
							class="btn nav-btn nav-btn-monospaced"
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-angle-right"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#angle-right"
								/>
							</svg>
						</button>
					</div>
				</div>
			</div>
			<div class="date-picker-calendar-body">
				<div class="date-picker-days-row date-picker-row">
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>S</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>M</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>T</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>W</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>T</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>F</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>S</abbr>
					</div>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 01 27"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						27
					</button>
					<button
						aria-label="2019 01 28"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						28
					</button>
					<button
						aria-label="2019 01 29"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						29
					</button>
					<button
						aria-label="2019 01 30"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						type="button"
					>
						30
					</button>
					<button
						aria-label="2019 01 31"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						type="button"
					>
						31
					</button>
					<button
						aria-label="2019 02 01"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						1
					</button>
					<button
						aria-label="2019 02 02"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						2
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 03"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						3
					</button>
					<button
						aria-label="2019 02 04"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						4
					</button>
					<button
						aria-label="2019 02 05"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						5
					</button>
					<button
						aria-label="2019 02 06"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						6
					</button>
					<button
						aria-label="2019 02 07"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						7
					</button>
					<button
						aria-label="2019 02 08"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						8
					</button>
					<button
						aria-label="2019 02 09"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						9
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 10"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						10
					</button>
					<button
						aria-label="2019 02 11"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						11
					</button>
					<button
						aria-label="2019 02 12"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						12
					</button>
					<button
						aria-label="2019 02 13"
						class="date-picker-date date-picker-calendar-item"
						tabindex="-1"
						type="button"
					>
						13
					</button>
					<button
						aria-label="2019 02 14"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						14
					</button>
					<button
						aria-label="2019 02 15"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						15
					</button>
					<button
						aria-label="2019 02 16"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						16
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 17"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						17
					</button>
					<button
						aria-label="2019 02 18"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						18
					</button>
					<button
						aria-label="2019 02 19"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						19
					</button>
					<button
						aria-label="2019 02 20"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						20
					</button>
					<button
						aria-label="2019 02 21"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						21
					</button>
					<button
						aria-label="2019 02 22"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						22
					</button>
					<button
						aria-label="2019 02 23"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						23
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 24"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						24
					</button>
					<button
						aria-label="2019 02 25"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						25
					</button>
					<button
						aria-label="2019 02 26"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						26
					</button>
					<button
						aria-label="2019 02 27"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						27
					</button>
					<button
						aria-label="2019 02 28"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						28
					</button>
					<button
						aria-label="2019 03 01"
						class="date-picker-date date-picker-calendar-item next-month-date"
						type="button"
					>
						1
					</button>
					<button
						aria-label="2019 03 02"
						class="date-picker-date date-picker-calendar-item next-month-date"
						type="button"
					>
						2
					</button>
				</div>
			</div>
			<div class="date-picker-calendar-footer">
				<div class="time-picker">
					<div class="input-group">
						<div class="input-group-item input-group-item-shrink">
							<span class="input-group-text">
								<svg
									class="lexicon-icon lexicon-icon-time"
									focusable="false"
									role="presentation"
								>
									<use href="/images/icons/icons.svg#time" />
								</svg>
							</span>
						</div>
						<div class="input-group-item">
							<input
								class="form-control"
								name="timer"
								type="time"
								value="00:00"
							/>
						</div>
						<div class="input-group-item input-group-item-shrink">
							<span class="input-group-text">(GMT+01:00)</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Field

Copied!
Code Sample (expand to see it)
<div class="input-group">
	<div class="input-group-item">
		<input name="datePicker" type="hidden" value="" />
		<input
			class="form-control input-group-inset input-group-inset-after"
			placeholder="YYYY-MM-DD"
			type="text"
			value=""
		/>
		<div class="input-group-inset-item input-group-inset-item-after">
			<button
				class="btn btn-unstyled date-picker-dropdown-toggle"
				type="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-calendar"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#calendar" />
				</svg>
			</button>
		</div>
	</div>
</div>

Date Picker

S
M
T
W
T
F
S
Copied!
Code Sample (expand to see it)
<div class="date-picker">
	<div class="input-group">
		<div class="input-group-item">
			<input name="datePicker" type="hidden" value="" />
			<input
				class="form-control input-group-inset input-group-inset-after"
				placeholder="YYYY-MM-DD"
				type="text"
				value=""
			/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button
					class="btn btn-unstyled date-picker-dropdown-toggle"
					type="button"
				>
					<svg
						class="lexicon-icon lexicon-icon-calendar"
						focusable="false"
						role="presentation"
					>
						<use href="/images/icons/icons.svg#calendar" />
					</svg>
				</button>
			</div>
		</div>
	</div>
	<div class="date-picker-dropdown-menu dropdown-menu show">
		<div class="date-picker-calendar">
			<div class="date-picker-calendar-header">
				<div class="date-picker-nav">
					<div class="date-picker-nav-item input-date-picker-month">
						<select class="form-control" disabled="" name="month">
							<option value="0">January</option>
							<option value="1">February</option>
							<option value="2">March</option>
							<option value="3">April</option>
							<option value="4">May</option>
							<option value="5">June</option>
							<option value="6">July</option>
							<option value="7">August</option>
							<option value="8">September</option>
							<option value="9">October</option>
							<option value="10">November</option>
							<option value="11">December</option>
						</select>
					</div>
					<div class="date-picker-nav-item input-date-picker-year">
						<select class="form-control" name="year">
							<option value="1997">1997</option>
							<option value="1998">1998</option>
							...
						</select>
					</div>
					<div
						class="date-picker-nav-item date-picker-nav-item-expand date-picker-nav-controls"
					>
						<button
							aria-label="Select the previous month"
							class="btn nav-btn nav-btn-monospaced"
							disabled=""
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-angle-left"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#angle-left"
								/>
							</svg>
						</button>
						<button
							aria-label="Select current date"
							class="btn nav-btn nav-btn-monospaced"
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-simple-circle"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#simple-circle"
								/>
							</svg>
						</button>
						<button
							aria-label="Select the next month"
							class="btn nav-btn nav-btn-monospaced"
							type="button"
						>
							<svg
								class="lexicon-icon lexicon-icon-angle-right"
								focusable="false"
								role="presentation"
							>
								<use
									href="/images/icons/icons.svg#angle-right"
								/>
							</svg>
						</button>
					</div>
				</div>
			</div>
			<div class="date-picker-calendar-body">
				<div class="date-picker-days-row date-picker-row">
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>S</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>M</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>T</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>W</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>T</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>F</abbr>
					</div>
					<div class="date-picker-day date-picker-calendar-item">
						<abbr>S</abbr>
					</div>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 01 27"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						27
					</button>
					<button
						aria-label="2019 01 28"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						28
					</button>
					<button
						aria-label="2019 01 29"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						disabled=""
						type="button"
					>
						29
					</button>
					<button
						aria-label="2019 01 30"
						class="active date-picker-date date-picker-calendar-item previous-month-date"
						type="button"
					>
						30
					</button>
					<button
						aria-label="2019 01 31"
						class="date-picker-date date-picker-calendar-item previous-month-date"
						type="button"
					>
						31
					</button>
					<button
						aria-label="2019 02 01"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						1
					</button>
					<button
						aria-label="2019 02 02"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						2
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 03"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						3
					</button>
					<button
						aria-label="2019 02 04"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						4
					</button>
					<button
						aria-label="2019 02 05"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						5
					</button>
					<button
						aria-label="2019 02 06"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						6
					</button>
					<button
						aria-label="2019 02 07"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						7
					</button>
					<button
						aria-label="2019 02 08"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						8
					</button>
					<button
						aria-label="2019 02 09"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						9
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 10"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						10
					</button>
					<button
						aria-label="2019 02 11"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						11
					</button>
					<button
						aria-label="2019 02 12"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						12
					</button>
					<button
						aria-label="2019 02 13"
						class="date-picker-date date-picker-calendar-item"
						tabindex="-1"
						type="button"
					>
						13
					</button>
					<button
						aria-label="2019 02 14"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						14
					</button>
					<button
						aria-label="2019 02 15"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						15
					</button>
					<button
						aria-label="2019 02 16"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						16
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 17"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						17
					</button>
					<button
						aria-label="2019 02 18"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						18
					</button>
					<button
						aria-label="2019 02 19"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						19
					</button>
					<button
						aria-label="2019 02 20"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						20
					</button>
					<button
						aria-label="2019 02 21"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						21
					</button>
					<button
						aria-label="2019 02 22"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						22
					</button>
					<button
						aria-label="2019 02 23"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						23
					</button>
				</div>
				<div class="date-picker-date-row date-picker-row">
					<button
						aria-label="2019 02 24"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						24
					</button>
					<button
						aria-label="2019 02 25"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						25
					</button>
					<button
						aria-label="2019 02 26"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						26
					</button>
					<button
						aria-label="2019 02 27"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						27
					</button>
					<button
						aria-label="2019 02 28"
						class="date-picker-date date-picker-calendar-item"
						type="button"
					>
						28
					</button>
					<button
						aria-label="2019 03 01"
						class="date-picker-date date-picker-calendar-item next-month-date"
						type="button"
					>
						1
					</button>
					<button
						aria-label="2019 03 02"
						class="date-picker-date date-picker-calendar-item next-month-date"
						type="button"
					>
						2
					</button>
				</div>
			</div>
		</div>
	</div>
</div>

Time Picker

(GMT+01:00)
Copied!
Code Sample (expand to see it)
<div class="input-group">
	<div class="input-group-item">
		<input class="form-control" name="timer" type="time" value="00:00" />
	</div>
	<div class="input-group-item input-group-item-shrink">
		<span class="input-group-text">(GMT+01:00)</span>
	</div>
</div>

How can this be improved? Create an issue!