Datepicker

Description

To follow

🔹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

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.sampleDatepickerMultiple}
        customClass="checkbox-custom-class"
        onChanged={(e: any) => inputChangedHandler(e, 'sampleDatepickerMultiple')}
      />
    </>
  )

🔹 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