Skip to main content Skip to docs navigation

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();
Events will display as you manipulate the picker.

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();
Events will display as you manipulate the picker.

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'
     }
 });
Events will display as you manipulate the picker.

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
     }
   }
 });
Events will display as you manipulate the picker.

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,
     }
   }
 });
Events will display as you manipulate the picker.

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();
Events will display as you manipulate the picker.

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')
   ]
 }
});
Events will display as you manipulate the picker.

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
    }
  });
});
Events will display as you manipulate the picker.

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,
   },
 }
});
Events will display as you manipulate the picker.

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'
   }
 });
Events will display as you manipulate the picker.

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,
     }
   }
 });
Events will display as you manipulate the picker.

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]
   }
 });
Events will display as you manipulate the picker.

Inline

You can also use the picker inline 

           
 <div
   class='log-event'
   id='inlinePicker'
 >
 </div>
           
         
           
$('#inlinePicker').tempusDominus({
   display: {
     inline: true
   }
 });
Events will display as you manipulate the picker.

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
 });
Events will display as you manipulate the picker.

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');
});
Events will display as you manipulate the picker.

Example with container parameter

All you need is an element to atach the picker to and a parent container. 

           
<div id='parent-container' class='relative p-5' style='overflow: auto; height: 100px; width: 100%;'>
  <div class='input-group log-event' id='containerDatePicker' data-td-target-input='nearest'
    data-td-target-toggle='nearest'>
    <input id='containerDatePickerInput' type='text' class='form-control' />
    <span class='input-group-text' data-td-target='#settingOptions' data-td-toggle='datetimepicker'>
      <span class='fas fa-calendar'></span>
  </div>
</div>
           
         
           
$('#containerDatePicker').tempusDominus({
  container: $('div[id="parent-container"]')[0],
});
Events will display as you manipulate the picker.