Datepicker
- harold.casimina (Unlicensed)
- Dio Danganan (Unlicensed)
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 --saveStandard 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