openui5-flatpickr

openui5-flatpickr is a SAPUI5 Custom Control that wraps flatpickr Date Picker

Demo

You can checkout a demo with different configurations here: https://stermi.github.io/openui5-flatpickr/test/demo/

Usage

Configure manifest.json

Add the library to sap.ui5 dependencies list and configure the resourceRoots to point where you uploaded the custom library.

"sap.ui5": {
    ...
    "dependencies": {
        "minUI5Version": "1.30.0",
        "libs": {
    		...
            "it.designfuture.flatpickr": {}
        }
    },
    "resourceRoots": {
        "it.designfuture.flatpickr": "./thirdparty/it/designfuture/flatpickr/"
    }
}

Add the custom control inside an XML View

First of all add the namespace

xmlns:df="it.designfuture.flatpickr"

And than you can simply add it a simple Input (FlatDatePicker extends InputBase)

<df:FlatDatePicker 
  class="sapUiMediumMargin"
  clickOpens="false"
  dateFormat="d/m/Y"
/>

Parameters

Name	Type	Default	Description
altFormat	string	"F j, Y"	Exactly the same as date format, but for the altInput field
altInput	boolean	false	Show the user a readable date (as per altFormat), but return something totally different to the server
altInputClass	string	""	This class will be added to the input element created by the altInput option. Note that altInput already inherits classes from the original input
allowInput	boolean	false	Allows the user to enter a date directly input the input field. By default, direct entry is disabled
clickOpens	boolean	false	Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open()
dateFormat	string	"Y-m-d"	A string of characters which are used to define how the date will be displayed in the input box. The supported characters are defined in the table below.
dateValue	object	null	Set the initial selected date. Same as preloading a date string into an input's value attribute, but can also handle a Date object
hourValue	int	12	Initial value of the hour element
minuteValue	int	0	Initial value of the minute element
disabledDates	object[]	[]	Arrays of dates object to be disabled
disableMobile	boolean	false	Set disableMobile to true to always use the non-native picker. By default, Flatpickr utilizes native datetime widgets unless certain options (e.g. disable) are used
enabledDates	object[]	[]	Arrays of dates object to be enabled
enableTime	boolean	false	Enables time picker
enableSeconds	boolean	false	Enables seconds in the time picker
hourIncrement	int	1	Adjusts the step for the hour input (incl. scrolling)
inline	boolean	false	Displays the calendar inline
maxDate	object	null	The maximum date that a user can pick to (inclusive).
minDate	object	null	The minimum date that a user can start picking from (inclusive)
minuteIncrement	int	5	Adjusts the step for the minute input (incl. scrolling)
mode	string	"single"	"single", "multiple", or "range"
noCalendar	boolean	false	Hides the day selection in calendar. Use it along with enableTime to create a time picker
shorthandCurrentMonth	boolean	false	Show the month using the shorthand version (ie, Sep instead of September)
static	boolean	false	Position the calendar inside the wrapper and next to the input element. (Leave false unless you know what you're doing.)
time_24hr	boolean	false	Displays time picker in 24 hour mode without AM/PM selection when enabled
weekNumbers	boolean	false	Enables display of week numbers in calendar

Events

Name	Description
onChange	onChange gets triggered when the user selects a date, or changes the time on a selected date
onOpen	onOpen gets triggered when the calendar is opened
onClose	onClose gets triggered when the calendar is closed
onMonthChange	onMonthChange gets triggered when the month is changed, either by the user or programmatically
onYearChange	onYearChange gets triggered when the year is changed, either by the user or programmatically
onReady	onReady gets triggered once the calendar is in a ready state
onValueUpdate	onValueUpdate gets triggered when the input value is updated with a new date string
onDayCreate	Take full control of every date cell with the onDayCreate() hook

Methods

Name	Description
clearDatePicker	Resets the selected dates (if any) and clears the input
openDatePicker	Shows/opens the calendar
closeDatePicker	Closes the calendar
destroyDatePicker	Destroys the Flatpickr instance, cleans up - removes event listeners, restores inputs, etc
formatDate	Return a formatted date
jumpToDate	Sets the calendar view to the year and month ofdate, which can be a date string, a Date, or nothing. If date is undefined, the view is set to the latest selected date, the minDate, or today’s date
parseDate	Parses a date string or a timestamp, and returns a Date
redrawDatePicker	Redraws the calendar. Shouldn’t be necessary in most cases
setDate	Sets the current selected date(s) todate, which can be a date string, a Date, or an Array of the Dates. Optionally, pass true as the second argument to force any onChange events to fire
toggleDatePicker	Shows/opens the calendar if its closed, hides/closes it otherwise
getSelectedDates	Return an array with selected dates

Build

If you would like to extend and customize the controllr, you can easily do that but re-building the code with just a simple Grunt command:

npm install
grunt build

You just need to take note of two things:

1. compatVersion: you should type here your project SAPUI5 version. Old projects (1.28.x) will generate a library-preload.json, new version will instead create a library-prelaod.js
2. openui5_theme: add addictional files for each theme you are supporting in your application

Credits

Emanuele Ricci

• Email: [e-mail]
• Twitter: @StErMi

License

This project is licensed under the Apache 2.0 License - see the LICENSE.md file for details