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].

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();