Datepicker

Shows datepicker.

Features/Functionality

Shows datepicker textbox with width: '250px'.
On datepicker div click, date picker will open.
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.
Placeholder is given in datepicker. It can be overridden, by overriding 'placeHolder' variable in pageLabels.
Component is container responsive.
It is cross browser compatible. (IE11, Edge, Firefox, chrome).

Basic Usage

Dependencies

flatpickr
jquery
shared styles
shared scripts

HTML Structure

<require from="{user_path}/datepickers/datepicker"></require>
<cst-datepicker input-mdl.bind="{inputMdl}" options.bind="{options}" other-info.bind="{otherInfo}" ext-disabled.bind="{disabled}" evt-change-callback.bind="{evtChangeCallback}"></cst-multi-line-text-box>

Bindable Properties

Property Name	Data Type	Required	Decription
inputMdl	any	No	Two way bound variable in which value will be set.
disableTime	boolean	No	For date picker only not dateTime picker. Default false
options	object	No	Component options
validations	object	No	To give validations
otherInfo	any	No	Extra info to be passed on event.
extDisabled	boolean	No	Disables any functionality on component.
evtChangeCallback	method	No	Method to be called on change.

Structure of bindable properties

inputMdl

inputMdl = ''    // On pageload default date value and will return date value if change

options

options = {
    minDate: '',
    maxDate: '',
    dateFormat: '',          //  'Z' - for ISO format- for more format go through flatpickr.js.org
    pageLabel: {},           // Override page labels
    pageColorData: {}        // Override css colour property
}

validations

validations {
    isRequired: true/false
    /* To be developed:
        others
    */
}

evtChangeCallback

evtChangeCallback(_event,_info);
_info = {
    overrideContext: overrideContext,
    otherInfo: otherInfo,
    value: item
}

For this event is null

CSS Overriding

Following classes are given to override CSS:
- .cst-datepicker-container-override : Container Class
- .cst-date-box-override: Element Class

Note

While giving the classes in page, give them in nested structure.

Rules

Component measurements

Image of measurements

** box-sizing: border-box is used. So width and height will be dimensions + padding.

Working Example

HTML

<template>
  <require from="./shared/core_comp/datepickers/datepicker"></require>
  <div>
    <cst-datepicker input-mdl.bind="inputMdl" options.bind="options" other-info.bind="otherInfo" ext-disabled.bind="disabled" evt-change-callback.bind="evtChangeCallback"></cst-datepicker>
  </div>
</template>

CSS

.cst-ex-datepicker {
    .cst-datepicker-container-override {
        width: 200px !important;
    }
}

class MyCls{
    constructor(){
        this.inputMdl = '2019-10-27T00:00:00.000Z';
        this.otherInfo = '';
        this.disabled = false;
        this.options = {
            minDate: '2019-10-27T00:00:00.000Z'
        }
    }

    evtChangeCallback(_event, _info) {
    }
}
export { MyCls }