Usage of dayjs directly in a UI5 custom control.

Dayjs is a JavaScript library for parsing, validating, and formatting dates.
With this custom control, you can use dayjs in your UI5 App.

• use custom input and output formats (i.e. input format YYYY-MM-DD and output format We/May/2022)
• manipulate your dates (i.e. add/remove days, months, years, etc.)
• get start/end of the week, month, year, etc.
• automatic translation, if present use locale of Fiori Launchpad, if not present use browser language

https://github.com/marianfoo/ui5-dayjs-sample/blob/main/uimodule/webapp/view/MainView.view.xml

$> yarn add @marianfoo/ui5-cc-dayjs
# or
$> npm install @marianfoo/ui5-cc-dayjs

1. define the dependeny in $yourapp/package.json

   // it is already in "dependencies" after installation
   "ui5": {
     "dependencies": [
       // ...
       "ui5-cc-dayjs",
       // ...
     ]
   }

2. declare the namespace in your XML view and use the custom control from that namespace

   <mvc:View ... 
           xmlns:datejs="ui5-community.dayjs"
           ...>
      <datejs:DayjsText id="dayjsControl" value="2014/12/30" inputFormat="yyyy/MM/dd" outputFormat="dd.MM.YYYY"/>
   </mvc:View>

Control is using dayjs behind the scenes. More interfaces from dayjs are coming.

Control is inheriting from sap.m.Text. So you can use all of the properties and methods of sap.m.Text.

• value
  • Input of date Format
  • If it´s not ISO 8601, you have to use the inputFormat property
• inputFormat
  • List of all available formats from dayjs here
• outputFormat
  • List of all available formats from dayjs here
• manipulate
  • currently support is only Add,Subtract, Start of Time and End of Time

   <mvc:View ... 
           xmlns:datejs="ui5-community.dayjs"
           ...>
          <Label text="Add 1 Day" />
          <datejs:DayjsText value="{path: '/date'}" inputFormat="{path: '/inputFormat'}" outputFormat="{path: '/outputFormat'}"
          manipulate="{method: 'add',unit: 'day',amount: 1}"/>

          <Label text="Substract 2 Month " />
          <datejs:DayjsText value="{path: '/date'}" inputFormat="{path: '/inputFormat'}" outputFormat="{path: '/outputFormat'}"
          manipulate="{method: 'subtract',unit: 'month',amount: 2}"/>

          <Label text="Begin of Year" />
          <datejs:DayjsText value="{path: '/date'}" inputFormat="{path: '/inputFormat'}" outputFormat="{path: '/outputFormat'}"
          manipulate="{method: 'startOf',unit: 'year'}"/>

          <Label text="End of Quarter" />
          <datejs:DayjsText value="{path: '/date'}" inputFormat="{path: '/inputFormat'}" outputFormat="{path: '/outputFormat'}"
          manipulate="{method: 'endOf',unit: 'quarter'}"/>
   </mvc:View>

• date1
  • Input of date1
• date2
  • Input of date1
  • If it´s not ISO 8601, you have to use the inputFormat property
• inputFormat
  • List of all available formats from dayjs here
• unit (default: millisecond)
  • list of available unit here
• integer (default integer = true)
  • show difference as integer or float
• absolut (default absolut = false)
  • show value as absolute value

   <mvc:View ... 
           xmlns:datejs="ui5-community.dayjs"
           ...>
          <Label text="Difference in Days" />
          <datejs:DayjsDiff date1="{path: '/date1'}" date2="{path: '/date2'}" inputFormat="{path: '/inputFormat'}" unit="day" integer="false"/>
          
          <Label text="Difference in Milliseconds" />
          <datejs:DayjsDiff date1="{path: '/date1'}" date2="{path: '/date2'}" inputFormat="{path: '/inputFormat'}"/>

          <Label text="Difference in Milliseconds and absolute" />
          <datejs:DayjsDiff date1="{path: '/date1'}" date2="{path: '/date2'}" inputFormat="{path: '/inputFormat'}" absolute="true"/>
   </mvc:View>

• getDayjsObject
  • returns dayjs Object

This work is dual-licensed under Apache 2.0 and the Derived Beer-ware License. The official license will be Apache 2.0, but ultimately you can choose between one of them if you use this work.

When you like this stuff, buy you a drink when you see the person.