Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

bootstrap-datetimepicker for bootstrap 4

I want to use bootstrap-datetimepicker with bootstrap 4 but I have some problems.

For this purpose I changed something like:

  1. pull-right to float-right
  2. table-condensed to table-sm
  3. glyphicons to fontawesome

but it did not work :(

Demo

Can anyone help me for converting this project to new bootstrap version?

like image 579
HamedFathi Avatar asked Dec 03 '17 12:12

HamedFathi


People also ask

Does bootstrap 4 have a DateTimePicker?

Bootstrap 4 compatible Datetimepicker with Material Design UI. Datetimepicker component allows user to select a date from a calendar and time from a visual analog clock; it also accepts values via direct input. You can find a variety of date and time picker examples here.

What is bootstrap DateTimePicker?

Bootstrap 5 DateTimepicker. DateTimepicker is a form that adds the function of selecting date and time without the necessity of using custom JavaScript code.

Does bootstrap have a datepicker?

As with bootstrap's own plugins, datepicker provides a data-api that can be used to instantiate datepickers without the need for custom javascript. For most datepickers, simply set data-provide="datepicker" on the element you want to initialize, and it will be intialized lazily, in true bootstrap fashion.

What is a DateTimePicker?

The DateTimePicker control is used to allow the user to select a date and time, and to display that date and time in the specified format. The DateTimePicker control makes it easy to work with dates and times because it handles a lot of the data validation automatically.


1 Answers

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.

like image 149
Mayeenul Islam Avatar answered Sep 20 '22 17:09

Mayeenul Islam