Форматирование Даты (sap.ui.model.type.Date) в SAPUI5
Для вывода даты в удобных и заданных форматах используются средства форматирования даты в SAPUI5.
Тип модели формата Дата: sap.ui.model.type.Date.
Выведем в форме поля даты в таких форматах:
Создадим новый проект приложения по шаблону “SAPUI5 Application”.
Для изучения и загрузки в SAP Web IDE вы можете скачать здесь: abc.training.test6.
В контроллере представления запишем JSON модель _data и предопределим ее в функции onInit:
- sap.ui.define([
- "sap/ui/core/mvc/Controller",
- "sap/ui/model/json/JSONModel"
- ], function(Controller, JSONModel) {
- "use strict";
- return Controller.extend("abc.training.test6.controller.ViewMain", {
- _data: {
- "dateStr": "2018.03.08",
- "date": new Date(2018, 2, 1)
- },
- onInit: function() {
- var oModel = new JSONModel(this._data);
- this.getView().setModel(oModel);
- }
- });
- });
В модели представлены два поля:
- dateStr – текстовое поле,
- date – объект даты.
В представлении ViewMain выведем эти поля модели в определенных форматах. Это делается средствами форматирования SAPUI5 прописав type: ‘sap.ui.model.type.Date’ и formatOptions:
- <mvc:View controllerName="abc.training.test6.controller.ViewMain" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
- displayBlock="true" xmlns="sap.m" xmlns:form="sap.ui.layout.form">
- <App>
- <pages>
- <Page title="{i18n>title}">
- <content>
- <form:SimpleForm width="auto" class="sapUiResponsiveMargin" layout="ResponsiveGridLayout" labelSpanL="3" labelSpanM="3" emptySpanL="4"
- emptySpanM="4" columnsL="1" columnsM="1" title="Стили форматирования дат" editable="true">
- <form:content>
- <Label text="Полный"/>
- <Text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'full', source: { pattern: 'yyyy.MM.dd' } } }"/>
- <Label text="Длинный"/>
- <Text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'long', source: { pattern: 'yyyy.MM.dd' } } }"/>
- <Label text="Средний"/>
- <Text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'medium', source: { pattern: 'yyyy.MM.dd' } } }"/>
- <Label text="Короткий"/>
- <Text text="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'short', source: { pattern: 'yyyy.MM.dd' } } }"/>
- <Label text="Ввод даты (в модели текстовое поле)"/>
- <DatePicker
- value="{ path: '/dateStr', type: 'sap.ui.model.type.Date', formatOptions: { style: 'full', source: { pattern: 'yyyy.MM.dd' } } }"/>
- <Label text="Ввод даты (в модели объект даты)"/>
- <DatePicker dateValue="{ path: '/date', formatOptions: { style: 'medium' } }"/>
- </form:content>
- </form:SimpleForm>
- </content>
- </Page>
- </pages>
- </App>
- </mvc:View>
Параметры для форматирования даты:
Примеры легко повторить в Console браузера Google Chrome.
- format: форматируем дату в необходимый вид используя предопределенные символы. Используемые символы: Век (G), Год (y/Y), Квартал (q/Q), Месяц (M/L), Неделя (w/W), День недели (E/c), День (d/D), Час (h/H/k/K), минута (m), секунда (s), Временная зона (z/Z/v/V/O/X/x).
Пример:- var oFormat = sap.ui.core.format.DateFormat.getInstance({
- format: "yMMMd"
- });
- oFormat.format(new Date());
- В русской локализации ответ: "7 мар. 2018 г."
- pattern — формат даты на основе заданного шаблона.
Пример:- var oDateFormat = sap.ui.core.format.DateFormat.getDateInstance({
- pattern: "EEE, MMM d, yyyy"
- });
- var oNow = new Date();
- oDateFormat.format(oNow);
- В русской локализации ответ: "ср, мар. 7, 2018"
- style. Может принимать значения full, short, medium или long.
В представлении обратите внимание на тег <DatePicker>, который выводит поле с календарем.
На этом все, будут вопросы пишите в комментах. Удачи в изучении SAPUI5.