bootstrap-datetimepicker for bootstrap 4
It's ok for me with Bootstrap4, what is your problem ? (sorry for my bad english :')
Edit lines with ".in"collapse to ".show" and icons
DEMO
@Stéphanie your demo more than made up for the short English explanation. Thanks!
For anyone else that might need to solve this, here go a very specific directions: (All based on @Stéphanie's answer below - checkout her demo.) There are four strings you need to search in the code:
"collapse in":"
g=f.find(".in")
.collapse:not(.in)
(g.removeClass("in"),h.addClass("in")
and in each case replace in with; show so that it will look like the following. Save the file and the calendar should work. Good luck!
"collapse show":"
g=f.find(".show")
.collapse:not(.show)
(g.removeClass("show"),h.addClass("show")
We've made a fork with the fixes with detail documentation:
Forked Repository:
- TechnoVista Limited/Bootstrap 4 DateTimePicker - Github
Usage:
jQuery(document).ready(function($) {
if (window.jQuery().datetimepicker) {
$('.datetimepicker').datetimepicker({
// Formats
// follow MomentJS docs: https://momentjs.com/docs/#/displaying/format/
format: 'DD-MM-YYYY hh:mm A',
// Your Icons
// as Bootstrap 4 is not using Glyphicons anymore
icons: {
time: 'fa fa-clock-o',
date: 'fa fa-calendar',
up: 'fa fa-chevron-up',
down: 'fa fa-chevron-down',
previous: 'fa fa-chevron-left',
next: 'fa fa-chevron-right',
today: 'fa fa-check',
clear: 'fa fa-trash',
close: 'fa fa-times'
}
});
}
});
Credits:
Thanks to Eonasdan
for the awesome library. Thanks to 非良 (wgbbiao
) for their fork too. Thanks to Camille Anelli's blog for the reminder about the icons.