openui5-flatpickr a stunning DatePicker for your SAPUI5 app #sapui5 #openui5 #tipoftheday #customcontrol

[ericci]

Introduction

In this post I will explain briefly why I needed to create openui5-flatpickr, an openui5 custom control that wrap a Date Picker.

OpenUI5 offers a huge variety of controls and widgets but sometimes it could happen that they don’t fit your needs or simply you can’t use because your project uses an old version of the UI5 framework.

Yes, I’m looking at your 1.28.x. Shame on you!

That’s why I started looking for some fancy plain (without dependencies) javascript DatePicker that could fit my needs, with a lot of settings, well written and tested.

The winner after some selections was flatpickr! Really well designed from the UI/UX side and with deep documentation/examples. Bravo!

Flatpickr is multilanguage, support themes and it’s easily customizable, that’s all I need to know and they’re pretty fast to asnwer to issues on their GitHub page.

Sneak Peak

Do you want a sneak peak of the final result? Here you go:

You could also play a little bit with a full working demo 😉

Usage

Integration it’s pretty easy, you just need to follow a few steps. You have to bear in mind that this code is for SAP/OpenUI5 1.42.x and it’s not tested (but it will work) for previous version.

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"

/>

Configurations, Methods and Events

• Parameters documentation


• Methods documentation


• Events documentation