Description
To followA component allows user to select a specific or a range of dates.
...
🔹System Dependencies
...
| Code Block | ||
|---|---|---|
| ||
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
| Code Block | ||
|---|---|---|
| ||
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')} /> <h4>CHECKBOX BUTTON<</> ) |
🔹 Datepicker Multiple
...
Configuration
| Code Block | ||
|---|---|---|
| ||
import { InputSelectionHandler} from 'empower-inputs'; let [formElement, setFormElement] = useState({ sampleDatepickerMultiple: { id: "sampleDatepickerMultiple", type: 'datepicker', placeholder: 'Select date', value: null, multiple: true, disabled: false, minDate: "2020-07-06", } }); .............. return ( <> <h4>DATEPICKER MULTIPLE</h4> <InputSelectionHandler config={formElement.sampleCheckboxsampleDatepickerMultiple} customClass="checkbox-custom-class" onChanged={(e: any) => inputChangedHandler(e, 'sampleCheckboxsampleDatepickerMultiple')} /> </> ) |
🔹 Properties
...
🔹 References
Repository Link: https://gitlabbitbucket.comorg/empowerteams/empower-inputs.git
NPM Package: npm: empower-inputs
...