Examples using jQuery
This page outlines using the picker with jQuery. The jQuery-provider.js
file must be included after
the
main picker code. jQuery is no longer a requirement and is here for backwards compatibility.
It's highly recommend to use the native methods as jQuery will be dropped completely in the future.
The events are slightly different with jQuery. Using the native methods events return as event.detail.[date|oldDate|etc]
.
With jQuery, you will access those values e.[date|oldDate|ect]
.
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>
$('#icon-only').tempusDominus();
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>
$('#datetimepicker1').tempusDominus();
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
$('#datetimepicker2').tempusDominus({
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>
$('#datetimepicker2').tempusDominus({
localization: {
today: "Перейти сегодня",
clear: 'Очистить выделение',
close: 'Закрыть сборщик',
selectMonth: 'Выбрать месяц',
previousMonth: "Предыдущий месяц",
nextMonth: "В следующем месяце",
selectYear: 'Выбрать год',
previousYear: 'Предыдущий год',
nextYear: 'В следующем году',
selectDecade: 'Выбрать десятилетие',
previousDecade: 'Предыдущее десятилетие',
nextDecade: 'Следующее десятилетие',
previousCentury: 'Предыдущий век',
nextCentury: 'Следующий век',
pickHour: "Выберите час",
incrementHour: 'Время увеличения',
decrementHour: 'Уменьшить час',
pickMinute: 'Выбрать минуту',
incrementMinute: 'Минута приращения',
decrementMinute: 'Уменьшить минуту',
pickSecond: 'Выбрать второй',
incrementSecond: 'Увеличение секунды',
decrementSecond: 'Уменьшение секунды',
togglePeriod: 'Переключить период',
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>
$('#datetimepicker3').tempusDominus({
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>
$('#datetimepicker4').tempusDominus({
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>
$('#datetimepicker5').tempusDominus();
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);
$('#enabledDisabled').tempusDominus({
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 = $('#linkedPickers1');
const linkedPicker2Element = $('#linkedPickers2');
linkedPicker1Element.tempusDominus();
linkedPicker2Element.tempusDominus({
useCurrent: false
});
linkedPicker1Element.on(tempusDominus.Namespace.events.change, (e) => {
linkedPicker2Element.tempusDominus('updateOptions',{
restrictions: {
minDate: e.date
}
});
});
linkedPicker2Element.on(tempusDominus.Namespace.events.change, (e) => {
linkedPicker2Element.tempusDominus('updateOptions',{
restrictions: {
maxDate: e.date
}
});
});
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>
$('#customIcons').tempusDominus({
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>
$('#viewMode').tempusDominus({
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>
$('#minViewMode').tempusDominus({
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>
$('#disabledDow').tempusDominus({
restrictions: {
daysOfWeekDisabled: [0, 6]
}
});
Inline
You can also use the picker inline
<div
class='log-event'
id='inlinePicker'
>
</div>
$('#inlinePicker').tempusDominus({
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>
$('#multipleDatePicker').tempusDominus({
multipleDates: true
});
Updating 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 = $('#settingOptions').tempusDominus();
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');
});