Multilingual Date/Time Picker In jQuery Plugins – Tempus Dominus

Time & Clock
date time picker in jquery plugins
File Size: 29.11 KB
Views Total: 1265 views
Last Update:April 21, 2024
Publish Date: August 30, 2013
Official Website: Go to website
License: MIT
Plugin Author: Eonasdan
Demo    Download

Tempus Dominus is a powerful and customizable date/time picker plugin for Bootstrap. Developed by Eonasdan, the plugin offers a range of features and options to make it easy to select dates and times on a website or application. It includes support for a variety of languages, date/time formats, and timezones. The plugin is built with JavaScript and Moment.js, which makes it fast and efficient.

It also offers several customization options, such as color schemes, date/time limits, and week start day. Tempus Dominus is easy to install and use, with clear documentation and examples. It’s a great tool for enhancing the user experience on your website or application, making it easier for users to select dates and times.

Features:

  • Multiple languages.
  • Automatic language detection.
  • 5 view modes: ‘clock’ | ‘calendar’ | ‘months’ | ‘years’ | ‘decades’.
  • Allows to enable/disable dates.
  • Allows date range selection.
  • Allows to disable/enable dates & times.
  • Allows to disabled days of the week.
  • Allows to select multiple dates.
  • Smart positioning (requires popperjs library).
  • Removed jQuery and Moment.js dependencies.

How to use ?

you can add jQuery librarey script.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/dist/js/jQuery-provider.min.js"></script>

 Add the needed popperjs library, Font Awesome 5 and Tempus Dominus’ files in the document.

<link rel="stylesheet" href="/path/to/dist/css/tempus-dominus.css" />
<link rel="stylesheet" href="/path/to/font-awesome@5/all.min.css" />
<script src="/path/to/popperjs@2/popper.min.js"></script>
<script src="/path/to/dist/js/tempus-dominus.js"></script>

Attach the date picker to an input field.

<input id="example" type="text" />
// Vanilla JS
new tempusDominus.TempusDominus(document.getElementById('example'), {
    // options here
});

// jQuery
$('#example').tempusDominus({
  // options here
});

 Enable a trigger button to toggle the date picker.

<div
  class="input-group"
  id="example"
  data-td-target-input="nearest"
  data-td-target-toggle="nearest"
>
  <input
    id="exampleInput"
    type="text"
    data-td-target="#example"
  />
  <span
    class="input-group-text"
    data-td-target="#example"
    data-td-toggle="datetimepicker"
  >
    <span class="fas fa-calendar"></span>
 </span>
</div>
// Vanilla JS
new tempusDominus.TempusDominus(document.getElementById('example'), {
    // options here
});

// jQuery
$('#example').tempusDominus({
  // options here
});

You can also attach the date picker to any element within the document.

<span
  id="example"
>
  <i class="fa-solid fa-calendar"></i>
</span>
// Vanilla JS
new tempusDominus.TempusDominus(document.getElementById('example'), {
    // options here
});

// jQuery
$('#example').tempusDominus({
  // options here
});

Set the language of the date picker. Available locals:

  • de
  • en
  • es
  • it
  • nl
  • ro
  • ru
new tempusDominus.TempusDominus(document.getElementById('example'), {
    localization: {
      dayViewHeaderFormat: { month: 'long', year: '2-digit' },
      locale: 'es',
      startOfTheWeek: 0
    },
});

Combine two date pickers to create a date range picker.

<!-- Date Picker 1 -->
<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="fa-solid fa-calendar"></span>
   </span>
</div>

<!-- Date Picker 2 -->
<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="fa-solid fa-calendar"></span>
  </span>
</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.date
    }
  });
});

Done

Thanks for make jQuery plugin is developed by Eonasdan For more Helpfull for users, please check the demo page or visit the official website.
List Of Version :
  • v6.9.6
  • v6.9.5
  • v6.9.4
  • v6.7.19
  • v6.7.16
  • v6.7.13
  • v6.7.11
  • v6.7.10
  • v6.7.7
  • v6.4.4
  • v6.4.3
  • v6.4.1
  • v6.2.10
  • v6.2.9
  • v6.2.8
  • v6.2.7
  • v6.2.6
  • v6.2.5
  • v6.2.4
  • v6.2.3
  • v6.1.2
  • v6.0.1
  • v6.0.0
  • v6.0.0-beta10
  • v6.0.0-beta10a
  • v6.0.0-beta9
  • v6.0.0-beta2
  • v6.0.0-alpha17
  • v6.0.0-alpha14
  • v6-beta8

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.