Components

Appframe Web provides you with a set of components that you can use you easily create more complex UI elements.

Date/time pickers

To add a date or time picker dropdown to your input element you must add an attribute. To get a date-picker for example you should add:data-datepicker. Use data-time-picker to get a time-picker.

Optional attributes

  • data-max-date="2020-12-24" - Sets the maximum date that can be selected
  • data-min-date="2019-01-01" - Sets the minimum date that can be selected
  • data-year-range="[2019,2050]" - Sets the range of years that will be shown in the dropdown. This example will show years from 2019 to 2050
  • data-year-range="5" - Sets the range of years that will be shown in the dropdown. This example will show 5 years back and 5 years forward.

Date picker methods

Picker supports additional events:

  • data-callback="someFnc" - will fire after date is picked. It will return date object as a parameter.
  • data-onshow="someFnc" - will fire before picker is shown on the screen. Will return picker object with method to set date for picker and also picker element for advanced usage.
function dateCallbackFnc(pDate){ console.log(pDate); } function dateOnShowFnc(pPicker){ pPicker.setDate(new Date("2012-12-12")); console.log(pPicker); }