Как ввести только месяц и год в UI5?

Здесь я вижу, что могу вставить ввод даты и времени: https://ui5.sap.com/#/entity/sap.m.DateTimeInput/sample/sap.m.sample.DateTimeInput

<DateTimeInput type="Date" placeholder="Enter Date ..." />

Но я хочу, чтобы пользователь выбирал только месяц и год, а не день. Является ли это возможным?


datepicker sapui5
person padibro    schedule 16.06.2014    source источник
comment
Для других читателей: не используйте DateTimeInput, так как он устарел. Текущее решение состоит в том, чтобы использовать DatePicker в соответствующем формате.   -  person Boghyon Hoffmann    schedule 28.03.2020

Ответы (2)


arrow_upward
3
arrow_downward

Да, удивительно легко:

Добавьте к DateTimeInput следующий атрибут: displayFormat="MM/yyyy"

person Bogdan    schedule 25.06.2014
comment
DateTimeInput устарел. Любое другое решение? stackoverflow.com/questions/39508413/ - person padibro; 15.09.2016
comment
@padibro Да, см. stackoverflow.com/a/58802617/5846045 - person Boghyon Hoffmann; 11.11.2019

arrow_upward
1
arrow_downward

Поскольку sap.m.DateTimeInput устарел, в нашем случае следует использовать sap.m.DatePicker.

Так же, как выбор только года, DatePicker теперь может обрабатывать displayFormat="MM/yyyy", начиная с UI5 1.68. Затем открывается сборщик с выбором месяца напрямую.

Ниже приведен небольшой пример с привязкой и проверкой:

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="MM/yyyy"
      valueFormat="MM/yyyy"
      width="7rem"
      value="{
        path: '/myMonthYear',
        type: 'DateType',
        formatOptions: {
          pattern: 'MM/yyyy',
          source: {
            pattern: 'MM/yyyy'
          }
        },
        constraints: { maximum: '12/2030' }
      }"
    />`,
  });

  Core.getMessageManager().registerObject(control, true);
  control.setModel(new JSONModel({
    myMonthYear:  `${new Date().getMonth() + 1}/${new Date().getFullYear()}`, // current month/year, e.g. '11/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>

sapui5 datepicker месяц только год
проверка месяца и года в sapui5 datepicker

person Boghyon Hoffmann    schedule 11.11.2019