使用sap.m.DatePicker仅选择年份 | DatePicker仅选择年份

本文介绍了使用sap.m.DatePicker仅选择年份的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有个约会。它是JSONModel中的字符串（例如'2016'），由 DateTimeInput 显示：

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

但是， DateTimeInput 已被弃用，我想将其替换为

I have a date. It is a string in the JSONModel (for example '2016'), shown by DateTimeInput:

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

However, DateTimeInput is deprecated and I want replace it by DatePicker:

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

But when the click on the value help, the picker shows the calendar, not the list of years only.

解决方案

As of UI5 1.68, DatePicker is capable of displaying the year-picker only. To enable it, displayFormat and valueFormat should be "yyyy".

Below is a small demo, including binding and validation:

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>

这篇关于使用sap.m.DatePicker仅选择年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！