CODEWITHSUNDEEP
dateinputsapui5
user2644620
user2644620

Reputation: 199

Date picker: How to change the focus of calendar to today's date in UI5?

I'm facing an issue regarding sap.m.DatePicker. I want to see Today's Date in the calendar, when I click on the calendar Icon. But I'm not able to display. Below is my Code:

<DatePicker displayFormat="dd-MM-yyyy" valueFormat="yyyy-MM-dd" value="31-12-9999" navigate=".onNavigateDate"/>

UI5 Date Picker 9999-12-31

In the above screenshot, I'm getting date 31-12-9999 from the back-end. But if click on calendar icon, I should see today's date in the calendar. It is very difficult for the user to navigate to the current date.

I have tried using setInitialFocusedDateValue but it didn't work. Below is my JavaScript code for the navigate event.

onNavigateDate: function(event) {
  var dateObject = event.getSource();
  dateObject.setModel(new JSONModel({ date: new Date() }));
  var m = dateObject.getModel();
  dateObject.setDateValue(m.getProperty("/date"));
  dateObject.setInitialFocusedDateValue(m.getProperty("/date"));
},

Can someone please help me to display today's date in the calendar if I click on the Calendar Icon?

Upvotes: 3

Views: 3968

Answers (4)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

It is very difficult for the user to navigate to the current date.

Since UI5 1.95 (commit dd3aeaa), controls displaying a calendar can set showCurrentDateButton="true" in order to display a Today icon in the navigation header area.

Here is a sample with sap.m.DatePicker:

<!-- No navigate handler needed -->
<DatePicker showCurrentDateButton="true"/>


globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/mvc/XMLView"
], async XMLView => {
  const definition = document.getElementById("myxmlview").textContent;
  const view = await XMLView.create({ definition });
  view.placeAt("content");
});
<script defer id="sap-ui-bootstrap"
  src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified"
  data-sap-ui-oninit="onUI5Init"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<script id="myxmlview" type="text/xml">
  <mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" displayBlock="true">
    <App>
      <Page showHeader="false" class="sapUiResponsiveContentPadding">
        <DatePicker showCurrentDateButton="true" value="9999-12-31" width="12rem"/>
      </Page>
    </App>
  </mvc:View>
</script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

UI5 Calendar picker with "Today" button

Once clicked, the calendar will navigate to and focus today's date.
Press Enter, Space, or click the focused date to select today.

Upvotes: 0

Daniel Almeida
Daniel Almeida

Reputation: 362

I used the navigate event like this and it worked:

View:

<DatePicker
  id="DP1"
  placeholder="Enter Date ..."
  navigate="onNavigate"
  value="31-12-9999"
  class="sapUiSmallMarginBottom"/>

And in the controller:

onNavigate : function(oEvent) {
    oEvent.getSource().setValue(new Date())
}

The logic you are using on your navigate method does not seem to work. Probably because of your UI5 version. The initialFocusedDateValue property was only released on version 1.46.0. Also, keep in mind that the approach I did changes the value of the date picker, which means that once closed, it will have today's date as a value.

Upvotes: 1

D. Seah
D. Seah

Reputation: 4592

unfortunately, you have to override a private function :-(

oDatePicker._openPopup = function() {
  var today = new Date();
  this.setValue(today.getFullYear() + '-' + (today.getMonth() +1) + '-' + today.getDate());      
  DatePicker.prototype._openPopup.apply(this, arguments);
}

http://jsbin.com/dotames/edit?html,js,output

because we cannot change value in the navigate event handle as it is too late (popover has already appeared)

Upvotes: 0

D. Seah
D. Seah

Reputation: 4592

by default it shows today's date remove 31-12-9999 in here

<DatePicker displayFormat="dd-MM-yyyy" valueFormat="yyyy-MM-dd" editable="true" navigate="onclickDate" value="31-12-9999"/>

Upvotes: 0

Related Questions