CODEWITHSUNDEEP
sapui5
softshipper
softshipper

Reputation: 34071

Why is the datepicker not recognizing wrong format?

I have a datepicker that was created with the following code snippet:

return new sap.m.DatePicker(sId, {
    dateValue: `{${sPath}}`,
    valueFormat: "dd-MM-yyyy",
    displayFormat: "dd-MM-yyyy"
});

Typing wrong weird stuff into the field:
enter image description here
It does not recognize the invalid format.

But when I tried to write in this example, it does recognize.
enter image description here

What am I doing wrong?

Upvotes: 1

Views: 660

Answers (2)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18054

const oDatePicker = new DatePicker(sId).bindValue({
  path: sPath,
  type: new DateType({ // "sap/ui/model/type/Date"
    pattern: "dd-MM-yyyy",
  })
});
const messageManager = sap.ui.getCore().getMessageManager();
messageManager.registerObject(oDatePicker, true);
return oDataPicker;

  1. If working with data binding, you'll need to bind the value property instead of dateValue.

    API reference: sap.m.DatePicker

    • Use the value property if you want to bind the DatePicker to a model using the sap.ui.model.type.Date.
    • Use the dateValue property if the date is already provided as a JavaScript Date object or you want to work with a JavaScript Date object. (...) Although possible to bind it, the recommendation is not to do it. When binding is needed, use value property instead.

  2. And finally, register the control to the MessageManager or enable handleValidation. UI5 will then take care of displaying the error message if the input could not be parsed or violates given constraints.

Upvotes: 1

Sebastian Mahr
Sebastian Mahr

Reputation: 36

https://sapui5.hana.ondemand.com/#/sample/sap.m.sample.DatePicker/code/Group.controller.js

handleChange: function (oEvent) {
        var oText = this.byId("T1");
        var oDP = oEvent.oSource;
        var sValue = oEvent.getParameter("value");
        var bValid = oEvent.getParameter("valid");
        this._iEvent++;
        oText.setText("Change - Event " + this._iEvent + ": DatePicker " + oDP.getId() + ":" + sValue);

        if (bValid) {
            oDP.setValueState(sap.ui.core.ValueState.None);
        } else {
            oDP.setValueState(sap.ui.core.ValueState.Error);
        }
    }

this is the change handler used in the sample you have to implement the error handling by yourself

Upvotes: 0

Related Questions