Relative date property binding (http://stackoverflow.com/a/42134064/5846045)

<!DOCTYPE HTML>
<html style="height: 100%;">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <script id="sap-ui-bootstrap"
    src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-theme="sap_fiori_3"
    data-sap-ui-modules="sap/ui/core/ComponentSupport"
    data-sap-ui-async="true"
    data-sap-ui-compatversion="edge"
    data-sap-ui-resourceroots='{"demo": "./"}'
    data-sap-ui-xx-componentPreload="off"
  ></script>
</head>
<body id="content" class="sapUiBody sapUiSizeCompact">
  <div data-sap-ui-component style="height: 100%;"
    data-id="rootComponentContainer"
    data-name="demo"
    data-height="100%"
    data-settings='{"id": "rootComponent"}'
  ></div>
</body>
</html>

{
	"_version": "1.17.0",
	"start_url": "index.html",
	"sap.app": {
		"id": "demo",
		"type": "application",
		"title": "foo",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui": {
		"technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_belize_hcb",
      "sap_belize_hcw",
      "sap_belize",
      "sap_belize_plus",
			"sap_fiori_3",
			"sap_fiori_3_hcb",
			"sap_fiori_3_hcw",
			"sap_fiori_3_dark"
    ]
	},
	"sap.ui5": {
	  "handleValidation": true,
		"dependencies": {
			"minUI5Version": "1.73.0",
			"libs": {
				"sap.m": {},
				"sap.ui.unified": {}
			}
		},
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
		"rootView": {
			"viewName": "demo.view.App",
			"type": "XML",
			"async": true
		},
		"routing": {
			"routes": [
				{
					"pattern": "",
					"name": "home",
					"target": "home"
				}
			],
			"targets": {
				"home": {
					"viewName": "Home",
					"viewLevel": 1
				},
				"notFound": {
					"viewName": "Home",
					"transition": "show"
				}
			},
			"config": {
				"routerClass": "sap.m.routing.Router",
				"viewType": "XML",
				"async": true,
				"viewPath": "demo.view",
				"transition": "slide",
				"controlId": "myApp",
				"controlAggregation": "pages",
				"bypassed": {
					"target": "notFound"
				}
			}
		}
	}
}

<mvc:View xmlns:mvc="sap.ui.core.mvc"
	xmlns="sap.m"
	displayBlock="true"
	height="100%"
>
	<App id="myApp">
		<pages>
			<!-- will be placed by Router -->
		</pages>
	</App>
</mvc:View>

<mvc:View xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m" 
  xmlns:core="sap.ui.core" 
  core:require="{ DateTimeType: 'sap/ui/model/type/Date' }"
>
  <Page class="sapUiResponsiveContentPadding" title="{
    path: 'demoModel>/date',
    type: 'DateTimeType',
    formatOptions: {
      relative: true
    }
  }">
    <DatePicker width="10rem" value="{
      path: 'demoModel>/date',
      type: 'DateTimeType',
      formatOptions: {
        relative: true,
        relativeRange: [-5, 5]
      }
    }" />
  </Page>
</mvc:View>

sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel) {
  "use strict";
  return UIComponent.extend("demo.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      this.setModel(new JSONModel({
        date: new Date()
      }), "demoModel");
      this.getRouter().initialize();
    }
  });
});