- var theme_customizer      = true;
- var flatpickr             = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Datepicker
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Form Widgets
                    li.breadcrumb-item.active Date Picker
          // Container-fluid starts
          .container-fluid
            .row 
              .col-xl-6
                .card
                  .card-header  
                    h4 Default calendar
                  .card-body.card-wrapper 
                    .row.g-3
                      .col-12
                        .input-group.main-inline-calender
                          input#inline-calender.form-control.mb-2(type='date')
              .col-xl-6
                .card
                  .card-header  
                    h4 Bootstrap calendar
                  .card-body.card-wrapper
                    .mb-3.row
                      label.col-md-3.col-form-label Date and time
                      .col-md-9
                        input#example-datetime-local-input.form-control.digits(type='datetime-local', value='2023-05-03T18:45:00')
                    .mb-3.row
                      label.col-md-3.col-form-label Date
                      .col-md-9
                        input.form-control.digits(type='date', value='2023-05-01')
                    .mb-3.row
                      label.col-md-3.col-form-label Month
                      .col-md-9
                        input.form-control.digits(type='month', value='2023-01')
                    .mb-3.row
                      label.col-md-3.col-form-label Week
                      .col-md-9
                        input.form-control.digits(type='week', value='2023-W09')
                    .mb-3.row
                      label.col-md-3.col-form-label Time
                      .col-md-9
                        input.form-control.digits(type='time', value='21:45:00')
              .col-xl-6
                .card
                  .card-header
                    h4 Date picker
                  .card-body.main-flatpickr
                    .card-wrapper.border.rounded-3
                      form.timepicker-wrapper
                        .row
                          label.col-xxl-3.box-col-12.text-start Default Date 
                          .col-xxl-9.box-col-12
                            .input-group.flatpicker-calender
                              input#datetime-local.form-control(type='date' value="2023-05-03")
                        .row
                          label.col-xxl-3.box-col-12.text-start Human Friendly 
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#human-friendly.form-control(type='date')
                        .row
                          label.col-xxl-3.box-col-12.text-start Min-Max Value
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#min-max.form-control(type='date')
                        .row
                          label.col-xxl-3.box-col-12.text-start Disabled Dates
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#disabled-date.form-control(type='date' value="2023-05-03")
                        .row
                          label.col-xxl-3.box-col-12.text-start Multiples Dates
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#multiple-date.form-control(type='date')
                        .row
                          label.col-xxl-3.box-col-12.text-start Customizing Conjunction
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#customize-date.form-control(type='date')
                        .row
                          label.col-xxl-3.box-col-12.text-start  Range
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#range-date.form-control(type='date')
                        .row
                          label.col-xxl-3.box-col-12.text-start  Preloading Dates
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#preloading-date.form-control(type='date')
              .col-xl-6
                .card
                  .card-header
                    h4 Time picker
                  .card-body.main-flatpickr
                    .card-wrapper.border.rounded-3
                      form.timepicker-wrapper
                        .row 
                          label.col-xxl-3.box-col-12.text-start Time Picker
                          .col-xxl-9.box-col-12
                            .input-group
                              input#time-picker.form-control(type='time' value="12:00")
                        .row
                          label.col-xxl-3.box-col-12.text-start 24-hour Time Picker
                          .col-xxl-9.box-col-12 
                            .input-group
                              input#twenty-four-hour.form-control(type='time' value="12:05")
                        .row
                          label.col-xxl-3.box-col-12.text-start Time Picker W/Limits
                          .col-xxl-9.box-col-12 
                            .input-group
                              input#limit-time.form-control(type='time' value="16:10")
                        .row
                          label.col-xxl-3.box-col-12.text-start Preloading Time
                          .col-xxl-9.box-col-12 
                            .input-group
                              input#preloading-time.form-control(type='time')
                        .row
                          label.col-xxl-3.box-col-12.text-start TimePicker with Limited Time Range
                          .col-xxl-9.box-col-12 
                            .input-group
                              input#limit-time-range.form-control(type='time')
                        .row
                          label.col-xxl-3.box-col-12.text-start TimePicker with Min/Max Time Range
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#limit-min-max-range.form-control(type='time')
                        .row
                          label.col-xxl-3.box-col-12.text-start Date With Time
                          .col-xxl-9.box-col-12 
                            .input-group.flatpicker-calender
                              input#datetime-local1.form-control(type='date')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
