Datepicker Work flow

Bindable Properties

  1. inputMdl
  2. options
  3. otherInfo
  4. extDisabled
  5. evtChangeCallback

Overview

  • Shows datepicker.

Features/Functionality

  • On click of textbox date picker will be opened.
  • Value will be set in the inputMdl passed on change.
  • min and max date can be given in options to give a range of dates which can be selected.
  • Change event callback will be called on value change.
  • Component is responsive.
  • It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Defaults

  • No defaults will be taken.
  • Datepicker's textbox
    • width: 250px

Breakdown

  • Integrate flatpickr library to display date picker.
  • If inputMdl has value, then default value will be shown.
  • Entered/Selected value will be set in inputMdl on change.
  • Validations will be done on value change.
  • If disabled is false, change event callback will be called on value change.
  • If disabled is true, Date will display in 'DD-MM-YYYY HH:mm' formate in string
  • On css override
    • .cst-datepicker-container-override: Container Class