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 |
---|---|---|---|
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