- var theme_customizer      = true;
- var date_time_picker      = true;
- var sidebar               = true;
- var scrollbar             = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                      .page-header
                        .row
                          .col-sm-6
                              h3
                                | Date Time Picker
                              ol.breadcrumb
                                li.breadcrumb-item
                                  a(href='index.html')
                                   | Home
                                li.breadcrumb-item Forms
                                li.breadcrumb-item Form Widgets
                                li.breadcrumb-item.active Date Time Picker
                          .col-sm-6
                            include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .card
                        .card-header
                          h5 Date  Time Picker
                        .card-body
                          .row
                            .col-md-12
                              .datetime-picker
                                form.theme-form
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end Minimum Setup
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-minimum.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-minimum')
                                        .input-group-text(data-target='#dt-minimum', data-toggle='datetimepicker')
                                          i.fa.fa-calendar  
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end Using Locales
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-local.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-local')
                                        .input-group-text(data-target='#dt-local', data-toggle='datetimepicker')
                                          i.fa.fa-calendar
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end Time Only
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-time.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-time')
                                        .input-group-text(data-target='#dt-time', data-toggle='datetimepicker')
                                          i.fa.fa-clock-o
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end Date Only
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-date.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-date')
                                        .input-group-text(data-target='#dt-date', data-toggle='datetimepicker')
                                          i.fa.fa-calendar
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end No Icon (input field only)
                                    .col-xl-5.col-sm-7.col-lg-8
                                      input#dt-noicon.form-control.datetimepicker-input.digits(type='text', data-toggle='datetimepicker', data-target='#dt-noicon')
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end Enabled/Disabled Dates
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-enab-disab-date.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-enab-disab-date')
                                        .input-group-text(data-target='#dt-enab-disab-date', data-toggle='datetimepicker')
                                          i.fa.fa-calendar
                                  .mb-3.row.g-3
                                    label.col-sm-3.col-form-label.text-end View Mode
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-view.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-view')
                                        .input-group-text(data-target='#dt-view', data-toggle='datetimepicker')
                                          i.fa.fa-calendar
                                  .mb-3.row.g-3.mb-0
                                    label.col-sm-3.col-form-label.text-end Disabled Days of the Week
                                    .col-xl-5.col-sm-7.col-lg-8
                                      #dt-disab-days.input-group.date(data-target-input='nearest')
                                        input.form-control.datetimepicker-input.digits(type='text', data-target='#dt-disab-days')
                                        .input-group-text(data-target='#dt-disab-days', data-toggle='datetimepicker')
                                          i.fa.fa-calendar
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files