Examples
Version 6 removes the need for an input field, Bootstrap, jQuery and MomemntJs.
If you still need jQuery, check out the jQuery examples.
Minimum Setup
All you need is an element to atach the picker to.
<span
id='icon-only'
class='log-event'
style='display: inline-block'
>
<i class='fas fa-calendar fa-9x'></i>
</span>
new tempusDominus.TempusDominus(document.getElementById('icon-only'));
Simple Setup
This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid icons, however you can overwrite the defaults globally.
<div
class='input-group'
id='datetimepicker1'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker1Input'
type='text'
class='form-control'
data-td-target='#datetimepicker1'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker1'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'));
Using Locales
You can provide localization options to override the tooltips as well as the day/month display.
You could also set this globally via tempusDominus.DefaultOptions.localization = { ... }
or by
creating a variable e.g. const ru = { today:'Перейти сегодня' ... };
then provide the options as
new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {
localization: ru
}
<label for='datetimepicker2Input' class='form-label'>Russian locale</label>
<div
class='input-group log-event'
id='datetimepicker2'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker2Input'
type='text'
class='form-control'
data-td-target='#datetimepicker2'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker2'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker2'), {
localization: {
today: "Перейти сегодня",
clear: 'Очистить выделение',
close: 'Закрыть сборщик',
selectMonth: 'Выбрать месяц',
previousMonth: "Предыдущий месяц",
nextMonth: "В следующем месяце",
selectYear: 'Выбрать год',
previousYear: 'Предыдущий год',
nextYear: 'В следующем году',
selectDecade: 'Выбрать десятилетие',
previousDecade: 'Предыдущее десятилетие',
nextDecade: 'Следующее десятилетие',
previousCentury: 'Предыдущий век',
nextCentury: 'Следующий век',
pickHour: "Выберите час",
incrementHour: 'Время увеличения',
decrementHour: 'Уменьшить час',
pickMinute: 'Выбрать минуту',
incrementMinute: 'Минута приращения',
decrementMinute: 'Уменьшить минуту',
pickSecond: 'Выбрать второй',
incrementSecond: 'Увеличение секунды',
decrementSecond: 'Уменьшение секунды',
toggleMeridiem: 'Переключить период',
selectTime: 'Выбрать время',
selectDate: 'Выбрать дату',
dayViewHeaderFormat: 'long',
locale: 'ru'
}
});
Time Only
Version 6 no longer uses MomentJs so selecting the what to display is now done via the
display.components
.
<div
class='input-group'
id='datetimepicker3'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker3Input'
type='text'
class='form-control'
data-td-target='#datetimepicker3'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker3'
data-td-toggle='datetimepicker'
>
<span class='fas fa-clock'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker3'), {
display: {
viewMode: 'clock',
components: {
decades: false,
year: false,
month: false,
date: false,
hours: true,
minutes: true,
seconds: false
}
}
});
Date Only
Version 6 no longer uses MomentJs so selecting the what to display is now done via the
display.components
.
<div
class='input-group'
id='datetimepicker4'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker4Input'
type='text'
class='form-control'
data-td-target='#datetimepicker4'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker4'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker4'), {
display: {
viewMode: 'clock',
components: {
decades: true,
year: true,
month: true,
date: true,
hours: false,
minutes: false,
seconds: false,
}
}
});
Input Only
An input group and icon are not required for the picker to function, you can also simply use an input field.
<div
class='input-group'
id='datetimepicker5'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='datetimepicker5Input'
type='text'
class='form-control'
data-td-target='#datetimepicker5'
/>
<span
class='input-group-text'
data-td-target='#datetimepicker5'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('datetimepicker5'));
Enabled/Disabled Dates
You can provide an array of dates to enable or dates to disable.
<div
class='input-group'
id='enabledDisabled'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='enabledDisabledInput'
type='text'
class='form-control'
data-td-target='#enabledDisabled'
/>
<span
class='input-group-text'
data-td-target='#enabledDisabled'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
const tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate()+1);
new tempusDominus.TempusDominus(document.getElementById('enabledDisabled'), {
restrictions: {
disabledDates: [
tomorrow,
new tempusDominus.DateTime().manipulate(2, 'date')
]
}
});
Linked pickers
You can use event listeners or the subscribe method to link two pickers together. For example, a hotel stay booking.
<div class='row'>
<div class='col-sm-6'>
<label for='linkedPickers1Input' class='form-label'>From</label>
<div
class='input-group log-event'
id='linkedPickers1'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='linkedPickers1Input'
type='text'
class='form-control'
data-td-target='#linkedPickers1'
/>
<span
class='input-group-text'
data-td-target='#linkedPickers1'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
</div>
<div class='col-sm-6'>
<label for='linkedPickers2Input' class='form-label'>To</label>
<div
class='input-group log-event'
id='linkedPickers2'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='linkedPickers2Input'
type='text'
class='form-control'
data-td-target='#linkedPickers2'
/>
<span
class='input-group-text'
data-td-target='#linkedPickers2'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
</div>
</div>
const linkedPicker1Element = document.getElementById('linkedPickers1');
const linked1 = new tempusDominus.TempusDominus(linkedPicker1Element);
const linked2 = new tempusDominus.TempusDominus(document.getElementById('linkedPickers2'), {
useCurrent: false
});
//using event listeners
linkedPicker1Element.addEventListener(tempusDominus.Namespace.events.change, (e) => {
linked2.updateOptions({
restrictions: {
minDate: e.detail.date
}
});
});
//using subscribe method
const subscription = linked2.subscribe(tempusDominus.Namespace.events.change, (e) => {
linked1.updateOptions({
restrictions: {
maxDate: e.detail.date
}
});
});
// event listener can be unsubscribed to:
// subscription.unsubscribe();
Custom Icons
You can change the icons from the Font Awesome default to another icon set like Bootstrap's Icon
<div
class='input-group'
id='customIcons'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='customIconsInput'
type='text'
class='form-control'
data-td-target='#customIcons'
/>
<span
class='input-group-text'
data-td-target='#customIcons'
data-td-toggle='datetimepicker'
>
<span class='bi bi-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('customIcons'), {
display: {
icons: {
time: 'bi bi-clock',
date: 'bi bi-calendar',
up: 'bi bi-arrow-up',
down: 'bi bi-arrow-down',
previous: 'bi bi-chevron-left',
next: 'bi bi-chevron-right',
today: 'bi bi-calendar-check',
clear: 'bi bi-trash',
close: 'bi bi-x',
},
buttons: {
today: true,
clear: true,
close: true,
},
}
});
View Mode
The view mode options allows you to show a different initial view. For example selecting a date of birth.
<div
class='input-group'
id='viewMode'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='viewModeInput'
type='text'
class='form-control'
data-td-target='#viewMode'
/>
<span
class='input-group-text'
data-td-target='#viewMode'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('viewMode'), {
display: {
viewMode: 'years'
}
});
Minimum View
You can set the minimum view mode by turning off lower level components. If you only want your user to select
month and year, display.components.date: false
. The display.components
object also
provides convenience shortcuts. For instance if you don't want any of the time picker components to be available
simple set display.components.clock: false
. Do be aware that display.components.clock
must be true (default) in order to display the time components regardless of display.components.hours|minutes|seconds
is true. The same applies for display.components.calendar
<div
class='input-group'
id='minViewMode'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='minViewModeInput'
type='text'
class='form-control'
data-td-target='#minViewMode'
/>
<span
class='input-group-text'
data-td-target='#minViewMode'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('minViewMode'), {
display: {
components: {
clock:false,
date: false,
}
}
});
Disabled Days of the Week
This is the simplest setup you can have with Bootstrap and Font Awesome 5. The picker defaults to FA 5 Solid icons, however you can overwrite the defaults globally.
<div
class='input-group'
id='disabledDow'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='disabledDowInput'
type='text'
class='form-control'
data-td-target='#disabledDow'
/>
<span
class='input-group-text'
data-td-target='#disabledDow'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('disabledDow'), {
restrictions: {
daysOfWeekDisabled: [0, 6]
}
});
Inline
You can also use the picker inline
<div
class='log-event'
id='inlinePicker'
>
</div>
new tempusDominus.TempusDominus(document.getElementById('inlinePicker'), {
display: {
inline: true
}
});
Multiple Dates
The picker allows for multiple dates to be selected.
<div
class='input-group'
id='multipleDate'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='multipleDateInput'
type='text'
class='form-control'
data-td-target='#multipleDate'
/>
<span
class='input-group-text'
data-td-target='#multipleDate'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
new tempusDominus.TempusDominus(document.getElementById('multipleDatePicker'), {
multipleDates: true
});
Update options
You can provide a new set of options by calling updateOptions([newOptions])
. This function also allows you to reset the options back to the default or merge the new options with the default instead of the existing uptions by passing true
as the section parameter.
<div
class='input-group'
id='settingOptions'
data-td-target-input='nearest'
data-td-target-toggle='nearest'
>
<input
id='settingOptionsInput'
type='text'
class='form-control'
data-td-target='#settingOptions'
/>
<span
class='input-group-text'
data-td-target='#settingOptions'
data-td-toggle='datetimepicker'
>
<span class='fas fa-calendar'></span>
</span>
</div>
const changeOptionsButton = document.getElementById('changeOptions');
const settingOptionsPicker = new tempusDominus.TempusDominus(document.getElementById('settingOptions'));
let on = false
changeOptionsButton.addEventListener('click', () => {
settingOptionsPicker.updateOptions({
restrictions: {
daysOfWeekDisabled: on ? [] : [0, 6]
}
});
on = !on;
changeOptionsButton.classList.toggle('btn-primary');
changeOptionsButton.classList.toggle('btn-secondary');
});