keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Tempus Dominus Datepicker

Tempus Dominus Datepicker.

Tempus Dominus is the successor to the very popular "eonasdan/bootstrap-datetimepicker". The plugin provides a wide array of options that allow developers to provide date and or time selections to users as simple pickers, date of birth selection, appointments and more. Click here

Basic Example

A simple date picker to select a date with minimal configuration.

Pick a date and time from the calendar popup.

<label for="labelPickerDefault" class="form-label">Simple picker</label>
<div class="input-group" id="w3-td-picker-default" data-td-target-input="nearest" data-td-target-toggle="nearest">
	<input id="labelPickerDefault" type="text" class="form-control" data-td-target="#w3-td-picker-default">
	<span class="input-group-text" data-td-target="#w3-td-picker-default" data-td-toggle="datetimepicker">
		<span class="fa-solid fa-calendar"></span>
	</span>
</div>
<div class="form-text">Pick a date and time from the calendar popup.</div>

Date only

Allows users to select only a date, excluding time input.

Pick a date from the calendar popup.

<label for="labelPickerDay" class="form-label">Choose Your Date and Time</label>
<div class="input-group" id="w3-td-picker-day" data-td-target-input="nearest" data-td-target-toggle="nearest">
	<input id="labelPickerDay" type="text" class="form-control" data-td-target="#w3-td-picker-day">
	<span class="input-group-text" data-td-target="#w3-td-picker-day" data-td-toggle="datetimepicker">
		<span class="fa-solid fa-calendar"></span>
	</span>
</div>
<div class="form-text">Pick a date from the calendar popup.</div>

Time only

Enables time selection without requiring a date input.

Pick a time from the calendar popup.

<label for="labelPickerTime" class="form-label">Choose Your Date and Time</label>
<div class="input-group" id="w3-td-picker-time" data-td-target-input="nearest" data-td-target-toggle="nearest">
	<input id="labelPickerTime" type="text" class="form-control" data-td-target="#w3-td-picker-time">
	<span class="input-group-text" data-td-target="#w3-td-picker-time" data-td-toggle="datetimepicker">
		<span class="fa-solid fa-calendar"></span>
	</span>
</div>
<div class="form-text">Pick a time from the calendar popup.</div>

Custom Icons

Customize the picker with your own icons for better visual appeal.

Pick a date and time from the calendar popup.

<label for="labelPickerCustomIcons" class="form-label">Choose Your Date and Time</label>
<div class="input-group" id="w3-td-picker-custom-icons" data-td-target-input="nearest" data-td-target-toggle="nearest">
	<input id="labelPickerCustomIcons" type="text" class="form-control" data-td-target="#w3-td-picker-custom-icons">
	<span class="input-group-text" data-td-target="#w3-td-picker-custom-icons" data-td-toggle="datetimepicker">
		<span class="fa-solid fa-calendar"></span>
	</span>
</div>
<div class="form-text">Pick a date and time from the calendar popup.</div>

Localization

Adjust language and regional formats for a localized user experience.

Pick a date and time from the calendar popup.

<label for="labelPickerLocalization" class="form-label">Choose Your Date and Time</label>
<div class="input-group" id="w3-td-picker-localization" data-td-target-input="nearest" data-td-target-toggle="nearest">
	<input id="labelPickerLocalization" type="text" class="form-control" data-td-target="#w3-td-picker-localization">
	<span class="input-group-text" data-td-target="#w3-td-picker-localization" data-td-toggle="datetimepicker">
		<span class="fa-solid fa-calendar"></span>
	</span>
</div>
<div class="form-text">Pick a date and time from the calendar popup.</div>

With Button

Add buttons like "Clear" or "Today" to enhance user control.


<button id="w3-td-picker-button" class="btn btn-primary">
	Pick date & time <i class="fa-solid fa-calendar"></i>
</button>

Inline View

Display the datepicker inline within the form, without a pop-up.


<div id="w3-td-picker-inline"></div>

Linked Pickers

Synchronize date and time pickers for a unified form experience.


<div class="row">
	<div class="col-sm-6">
		<label for="w3-td-picker-linked-startDate" class="form-label">From</label>
		<div class="input-group" data-td-target-input="nearest" data-td-target-toggle="nearest" id="w3-td-linked-startDate">
			<input id="w3-td-picker-linked-startDate" type="text" class="form-control" data-td-target="#w3-td-linked-startDate" />
			<span class="input-group-text" data-td-target="#w3-td-linked-startDate" data-td-toggle="datetimepicker">
				<span class="fa-solid fa-calendar"></span>
			</span>
		</div>
	</div>

	<div class="col-sm-6">
		<label for="w3-td-picker-linked-endDate" class="form-label">To</label>
		<div class="input-group" data-td-target-input="nearest" data-td-target-toggle="nearest" id="w3-td-linked-endDate">
			<input id="w3-td-picker-linked-endDate" type="text" class="form-control" data-td-target="#w3-td-linked-endDate" />
			<span class="input-group-text" data-td-target="#w3-td-linked-endDate" data-td-toggle="datetimepicker">
				<span class="fa-solid fa-calendar"></span>
			</span>
		</div>
	</div>
</div>