Datepicker

Description

A component allows user to select a specific or a range of dates.

System Dependencies

Installation

The package can be installed via npm:

npm install empower-inputs --save

Standard Datepicker

 

Configuration

import { InputSelectionHandler} from 'empower-inputs'; let [formElement, setFormElement] = useState({ sampleDatepickerSingle: { id: "sampleDatepickerSingle", type: 'datepicker', placeholder: 'Select date', value: null, disabled: false, disabledDates: ["2020-07-22", "2020-07-23", "2020-07-24"], disabledDays: ["Sun", "Sat"], } }); .............. return ( <> <h4>DATEPICKER SINGLE</h4> <InputSelectionHandler config={formElement.sampleDatepickerSingle} customClass="checkbox-custom-class" onChanged={(e) => inputChangedHandler(e, 'sampleDatepickerSingle')} /> </> )

 

Datepicker Single with TIme

 

Configuration

import { InputSelectionHandler} from 'empower-inputs'; let [formElement, setFormElement] = useState({ sampleDateTimepickerSingle: { id: "sampleDatepickerSingle", type: 'datepicker', label: "Sample Datepicker Single with Time", placeholder: 'Select date', value: null, disabled: false, withTime: true, required: true, disabledDates: ["2020-07-22", "2020-07-23", "2020-07-24"], disabledDays: ["Sun", "Sat"], } }); .............. return ( <> <h4>DATEPICKER SINGLE WITH TIME</h4> <InputSelectionHandler config={formElement.sampleDateTimepickerSingle} customClass="checkbox-custom-class" onChanged={(e) => inputChangedHandler(e, 'sampleDateTimepickerSingle')} /> </> )

 

Datepicker Multiple

 

Configuration

 

 Properties

Parent Parameter

Sub Parameter

Data Type

Constraint

Parent Parameter

Sub Parameter

Data Type

Constraint

config

 

JSON Object

Required

 

id

String

Required

 

type

String

Required

 

label

String

Optional

 

value

Array Object

Required

 

placeholder

String

Optional

 

required

Boolean

Optional

 

disabled

Boolean

Optional

 

disabledDates

Array (String)

Optional

 

disabledDays

Array (String)

Optional

 

multiple

Boolean

Optional

 

minDate

String

Optional

 

maxDate

String

Optional

 

dateNow

String

Optional

 

withTime

Boolean

Optional

customClass

 

String

Optional

onChanged

 

Event Method

Required

References

Repository Link: https://bitbucket.org/empowerteams/empower-inputs

NPM Package: npm: empower-inputs

Demo Repo: git@bitbucket.org:empowerteams/mfe-sub-application-template.git