Mask input for sap.m.Date(Time)Picker

问题:

With the sap.m.DateTimePicker, it's possible for a user to either select a value from the drop-down list or enter it manually. I'm wondering if there's a way to add a mask to the manual input box that matches the valueFormat of the DateTimePicker.

I know there's a sap.m.MaskInput as well, so maybe there's a way to combine the two elements.

回答1:

There is a new private module named sap.m.MaskEnabler which the sap.m.InputBase (i.e. DateTimePicker) is supposed to make use of.

(MaskEnabler) should be applied to the prototype of a sap.m.InputBase.

The mask feature is currently enabled only in sap.m.TimePicker (v1.54). According to this commit message, however, the same feature will arrive to the Date(Time)Picker as well:

This change prepares for refactoring of DatePicker and TimePicker so the common code of both pickers can be moved to a new common control that they may extend.

Therefore, if it's not urgent, and depending on your project, I'd not create a new custom control and then throw it away once the mask feature has arrived.

I'll update my answer when it's available.

---

Until then (and even afterwards), you can still guide the user to enter the data in the correct format via OData binding type sap.ui.model.odata.type.DateTime:

<DateTimePicker
  value="{
    path: 'myODataModel>myDateTime',
    type: 'sap.ui.model.odata.type.DateTime',
    constraints: {
      isDateOnly: true,
      displayFormat: 'Date'
    }
  }"
  minDate="{...}"
  maxDate="{...}"
/>

• In contrast to formatter, type allows us to keep two-way data binding.
• The entered value is automatically intercepted from updating the model data when...
  1. It could not be parsed due to an invalid format (fires parseError)
  2. It could be parsed but the constraints were violated (fires validationError)

• If you enable handling UI messages additionally, the framework will then take care of creating the appropriate message for the user:

  

Example: https://stackoverflow.com/a/48482544

回答2:

I think the only way to combine the two sap.m.DateTimePicker and sap.m.MaskInput is to develop your own control . Documentation : https://sapui5.hana.ondemand.com/#/topic/91f1703b6f4d1014b6dd926db0e91070.

Another way is to just use the Placeholder of the DateTimePicker Input field. This does not provide the same functionality as a MaskInput, but helps the user which valueFormat is expected in the input when entering it manually.

回答3:

If you have a binding in your input box, you could set the type in the binding to eg. sap.ui.model.type.Date. This way you get some automatic formatting when field validation is triggered. There are other types available and you could inherit from sap.ui.model.SimpleType to code your own.