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