Question

我有一个日期，它是jsonModel中的一个字符串（例如＆＃39; 2016＆＃39;），由DateTimeInput https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.DateTimeInput/samples显示

<DateTimeInput
  value="{year}"
  displayFormat="yyyy"
  valueFormat="yy"
/>

不推荐使用DateTimeInput，我希望将其替换为DatePicker https://openui5.hana.ondemand.com/explored.html#/entity/sap.m.DatePicker/samples

<DatePicker
  value="{year}"
  displayFormat="yyyy"
  valueFormat="yy"
/>

但是当输入字段上的点击显示日历时，而不是仅显示年份列表

Answer 1

从UI5 1.68开始，DatePicker仅能显示年份选择器。要启用它，displayFormat和valueFormat应该是"yyyy"。

下面是一个小型演示，包括绑定和验证：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/Core",
], async (Fragment, JSONModel, Core) => {
  "use strict";

  const control = await Fragment.load({
    definition: `<DatePicker xmlns="sap.m" xmlns:core="sap.ui.core"
      core:require="{ DateType: 'sap/ui/model/type/Date' }"
      maxDate="{/maxDate}"
      class="sapUiTinyMargin"
      displayFormat="yyyy"
      valueFormat="yyyy"
      width="7rem"
      value="{
        path: '/myYear',
        type: 'DateType',
        formatOptions: {
          pattern: 'yyyy',
          source: {
            pattern: 'yyyy'
          }
        },
        constraints: { maximum: 2030 }
      }"
    />`,
  });

  Core.getMessageManager().registerObject(control, true);
  control.setModel(new JSONModel({
    myYear: new Date().getFullYear(), // current year, e.g. 2019
    maxDate: new Date("2030-12-31") // control awaits a JS date object for maxDate
  })).placeAt("content");
}));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.unified"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script><body id="content" class="sapUiBody"></body>

使用DatePicker仅选择年份

1 个答案: