Ashish Patil
Ashish Patil

Reputation: 1742

How to specify constraints for sap.m.DatePicker?

This is how we specify minimum / maximum constraint for DatePicker within controller.js. But how to do this within XML view?

Below code within XML is not working.

<DatePicker id="dp" value="{
  path: '/val',
  type:'sap.ui.model.type.Date',
  formatOptions: {
    pattern: 'yyyy-MM-dd',
    strictParsing: 'true'
  },
  constraints: {
    minimum: '/min',
    maximum: '/max'
  }
}" />

Upvotes: 3

Views: 3118

Answers (1)

Boghyon Hoffmann
Boghyon Hoffmann

Reputation: 18044

Unfortunately, there is no binding support (and won't be any) inside another binding definition which is why binding paths such as '/min' or '/max' in constraints are invalid. It's just not possible because only modules, which extend from MananagedObject, support data binding features.

Therefore, such definitions must be done in JS outside of the XML view. One of such workarounds would be to call a high level API of bindProperty on the control instance (in our case, bindValue) while you can keep the control settings in the XML view.

<DatePicker id="dp"/>
this.byId("dp").bindValue({
  path: "/val",
  type: "sap.ui.model.type.Date",
  formatOptions: { /*...*/ },  
  constraints: {
    minimum: myModel.getProperty("/min"),
    maximum: myModel.getProperty("/max"),
  },
});

Alternatively, you can keep the binding path in the XML view and set only the binding type (Date) in JS with setType from the value-PropertyBinding instance:

<DatePicker id="dp" value="{/val}"/>
// `DateType` required from "sap/ui/model/type/Date"
const type = new DateType({
  // formatOptions
  pattern: "yyyy-MM-dd",
  strictParsing: true,
}, {
  // constraints
  minimum: myModel.getProperty("/min"),
  maximum: myModel.getProperty("/max"),
});
this.byId("dp").getBinding("value").setType(type, "string");

The second argument of setType is the name of the JS type of the value property, aka "internal type". In this case, it's "string".

The internal type is the property type of the element which the value is formatted to.

Upvotes: 3

Related Questions