extends ../../../layouts/LayoutComponent

append variables


prepend styles
  link(href=`${CWD}vendors/flatpickr/flatpickr.min.css`, rel='stylesheet')

prepend scripts
  script(src=`${CWD}vendors/flatpickr/flatpickr.min.js`)
  script(src=`${CWD}vendors/flatpickr/bn.js`)

append content
  +PageHeader({ title: 'Date Picker' })
    p.mt-2 Lightweight, powerful javascript datetimepicker with no dependencies.
    a(href='https://flatpickr.js.org/' target='_blank').btn.btn-link.ps-0.btn-sm  Flatpickr documentation
      span.fas.fa-chevron-right.ms-1.fs-11

  .card.mb-3
    .card-header
      h5.mb-0 Stylesheet
    .card-body.bg-body-tertiary
      +ComponentCardLib
        link(href=`vendors/flatpickr/flatpickr.min.css`, rel='stylesheet')
  .card.mb-3
    .card-header
      h5.mb-0 Javascript
    .card-body.bg-body-tertiary
      +ComponentCardLib
        script(src=`vendors/flatpickr/flatpickr.min.js`)

  .row.g-3
    .col-lg-6
      +ComponentCard({
        title: 'Date Picker',
        anchor: true,
      })
        = '\n'
        label.form-label(for="datepicker") Start Date
        = '\n'  
        input.form-control.datetimepicker#datepicker(type="text" placeholder="dd/mm/yy" data-options!={disableMobile:true})
        = '\n'
    .col-lg-6
      +ComponentCard({
        title: 'Time Picker',
        anchor: true,
      })
        = '\n'
        label.form-label(for="timepicker1") Start Time
        = '\n'  
        input.form-control.datetimepicker#timepicker1(type="text" placeholder="H:i" data-options!={enableTime:true, noCalendar: true, dateFormat:'H:i',disableMobile:true})
        = '\n'
    .col-lg-6
      +ComponentCard({
        title: 'Date & Time Picker',
        anchor: true,
      })
        = '\n'
        label.form-label(for="datetimepicker") Start Date
        = '\n'  
        input.form-control.datetimepicker#datetimepicker(type="text" placeholder="dd/mm/yy HH:ii" data-options!={enableTime: true, dateFormat:'d/m/y H:i',disableMobile:true})
        = '\n'
    .col-lg-6
      +ComponentCard({
        title: 'Range',
        anchor: true,
      })
        = '\n'
        label.form-label(for="timepicker2") Select Date Range
        = '\n'  
        input.form-control.datetimepicker#timepicker2(type="text" placeholder="dd/mm/yy to dd/mm/yy" data-options!={
          mode:'range', 
          dateFormat:'d/m/y',
          disableMobile:true,
        })
        = '\n'

    .col-lg-12
      +ComponentCard({
        title: 'Predefined Ranges',
        anchor: true,
      })
        = '\n'
        label.form-label(for="timepicker3") Select Date Range
        = '\n'  
        input.form-control.mb-5.datetimepicker#timepicker3(type="text" placeholder="dd/mm/yy to dd/mm/yy" data-options!={
          mode:'range', 
          dateFormat:'d/m/y',
          disableMobile:true,
          position: 'below',
          predefinedRanges: [
            'today', 
            {'last_7_days': 'Last week'},
            'last_month',
            {
              label: 'My Days',
              range: ["2023-10-10", new Date()]
            }
          ]
        })
        = '\n'

        h5.mb-4 How it Works:
        h5.fs-9 Basic
        ul.mb-4 
          li 
            p Pass 
              code "predefinedRanges":true 
              | through 
              code data-options 
              | attribute to apply the default preset ranges.
              
              +ComponentCardLib('js')
                | "predefinedRanges":true

        h5.fs-9.mb-2 Customize Default Ranges
        ul 
          li.mb-3 
            p Provide the default ranges ID in the  
              code predefinedRanges 
              | as an array if you would want a specific set of default preset ranges.

            +ComponentCardLib('js')
              | "predefinedRanges":["today", "last_7_days"]

            span.fs-10.fst-italic.mb-3 Available default predefined IDs are 
              code today, 
              code last_month, 
              code this_month, 
              code last_7_days, 
              code last_30_days 
          li 
            p Simply provide your own label as the value and the ID as the key of an object in the 
              code predefinedRanges 
              |  array to alter the default preset ranges label text.

            +ComponentCardLib('js').mb-2
              | "predefinedRanges":["today", {"last_7_days": "Last week"}]
        
        h5.fs-9.mb-2 Add Custom Ranges
        ul 
          li.mb-3 
            p Provide the 
              code label 
              | and 
              code range 
              | as an object as an element of the 
              code predefinedRanges 
              | array if you would want your own custom preset ranges.

            +ComponentCardLib('js').mb-2
              | "predefinedRanges": [
              |  "today", 
              |  {"last_7_days": "Last week"}, 
              |  {"label": "My Days", "range": ["2023-10-10", "2023-11-10"]}
              |  ]


    .col-lg-12
      +ComponentCard({
        title: 'Validation',
        description: 'Pass <code>"allowInput":true</code> through <code>data-options</code> attribute to apply the form validation.',
        anchor: true,
      })
        form.needs-validation(novalidate)
          .mb-3
            label.form-label(for="datepickerVal")  Date
            input.form-control.datetimepicker#datepickerVal(type="text" placeholder="dd/mm/yy" required data-options!={disableMobile:true, allowInput: true})
            .invalid-feedback This field is required

          .mb-3
            label.form-label(for="dateTimepickerVal") Date & Time
            input.form-control.datetimepicker#dateTimepickerVal(type="text" required placeholder="d/m/y H:i" data-options!={enableTime: true, dateFormat:'d/m/y H:i',disableMobile:true, allowInput: true})
            .invalid-feedback This field is required

          button.btn.btn-primary(type="submit") Submit form

    .col-lg
      .card
        .card-header.mb-0.bg-body-tertiary
          h5(data-anchor) Localization
          p.mb-1 Flatpickr can be localized per-instance, or globally. To localize flatpickr import language script in 
            code src/js/flatpickr.js.
            | For example, you can use Bangla language by importing the following script
          +ComponentCardLib('js').mb-2
            | import "flatpickr/dist/l10n/bn.js"

          p.mb-0 For more details visit Flatpickr  
            a(href='https://flatpickr.js.org/localization/' target="_blank") localization documentation
            | .
        .card-body.bg-body-tertiary.py-0
          +ComponentCard({ title: 'Example' }).mx-nx1.shadow-none.rounded-top-0
            .mb-3
              = '\n'
              label.form-label(for="timepicker4") Select Time Range
              = '\n'  
              input.form-control.datetimepicker#timepicker4(type="text" placeholder="d/m/y to d/m/y" data-options!={mode:'range',  dateFormat:'d/m/y', disableMobile:true, locale: 'bn'})