'How to get notified about DatePicker ValueHelp event?

I need to be able to know when the DatePicker's value help button is pressed and the calendar shows up.

But there is not any reference in the docs of how to do this.

sapui5

Solution 1:^[1]

You can use the navigate event to do this. First, declare the datepicker in the view (Below example for xml view) and give the callback for the navigate event.

<DatePicker id="some_date" navigate="onClickDate"/>

Then, give declaration for the callback function in your controller for this view.

onClickDate: function(){
    //do something
}

Hope this helps.

Solution 2:^[2]

You can use the navigate event, but then that will also fire again each time the user navigates in the calendar.

Technically, you could use the press event of the value help icon (oDatePicker._getValueHelpIcon().attachPress()), but that would probably be frowned upon as it uses a private method of the control.

Solution 3:^[3]

You can use "isOpen()" for when the dates are revealed or "getValue()" to get the last selected value on the calendar and returned by the change event, other methods are available here>> DatePicker Methods

//DatePicker View.js
var datePicker = new DatePicker(this.createId("calendarSelect"), {
  width: "80%",
  maxDate: new Date(),
  valueFormat: "yyyy-MM-dd",
  displayFormat: "long",
  change: function() {
    oController.someFunction();
  },
  value: new Date().toDateString("en-GB")
});

//DatePicker Controller.js
someFunction: function() {
  console.log(this.getView().byId("calendarSelect").isOpen()); // returns true or false when the calendar is open 
  console.log(this.getView().byId("calendarSelect").getValue()); //to get value selected 
}

Solution 4:^[4]

Depending on the target UI5 version, the control provides ValueHelp-related events to which you can attach your handlers.

<DatePicker xmlns="sap.m"
  navigate=".onNavigate"
  afterValueHelpOpen=".onAfterValueHelpOpen"
  afterValueHelpClose=".onAfterValueHelpClose"
/><!-- Applies also to sap.m.DateTimePicker and sap.m.DateRangeSelection -->

onNavigate: function(event) { // Since 1.46
  const isFiredAfterPopupOpened = event.getParameter("afterPopupOpened"); // Since 1.62
  // ...
},
onAfterValueHelpOpen: function() { // Since 1.102
  // ...
},
onAfterValueHelpClose: function() { // Since 1.102
  // ...
},

Here is a demo:

globalThis.onUI5Init = () => sap.ui.require([
  "sap/m/DatePicker",
], (DP, MsgToast) => new DP({
  placeholder: "Press F4 or click on -->",
  navigate: e => e.getParameter("afterPopupOpened") && console.log("Event: navigate", "with afterPopupOpened: true"),
  afterValueHelpOpen: () => console.log("Event:"," afterValueHelpOpen"),
  afterValueHelpClose: () => console.log("Event: afterValueHelpClose"),
  width: "16rem",
}).addStyleClass("sapUiTinyMargin").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_horizon"
  data-sap-ui-compatversion="edge"
  data-sap-ui-excludejquerycompat="true"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

The events afterValueHelpOpen and afterValueHelpClose are also available for sap.m.TimePicker since UI5 1.102.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	d01ph1n
Solution 2	rikusv
Solution 3	O.O
Solution 4

'How to get notified about DatePicker ValueHelp event?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]