CODEWITHSUNDEEP
javascriptjquerydatepickersapui5
Tim Malich
Tim Malich

Reputation: 1391

SAPUI5 Datepicker read only

Does anyone know how to make the SAPUI5 control sap.m.DatePicker read only? I would like to be able to show the standard calendar UI to the user if he clicks on the little calendar icon but the user shouldn't be allowed to actually change the date.

The only workaround I found so far is to attach a function to the change event and reset the value property to the original value. But that's neither good nor pretty.

Here's a little JSBin example with a DatePicker.

jQuery(function() {
  var picker = new sap.m.DatePicker();       
  picker.detachEvent("change");

  // is there a better solution than this: `??????
  picker.attachChange(function(oEvent){
    oEvent.getSource().setDateValue(new Date())
  });      

  picker.placeAt('content');
});

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

Upvotes: 1

Views: 3232

Answers (2)

bfmags
bfmags

Reputation: 2935

  • overriding the .setDateValue() method for your instance will disable the date selection.

sap.m.DatePicker source code on github is worth a look.

  var picker = new sap.m.DatePicker(); 
  picker.setDateValue = function() {};

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

  • extending the sap control to overwrite the setDateValue method, final solution by @TimMalich 
$.sap.declare('YOUR.NAMESPACE.DatePicker');
sap.m.DatePicker.extend("YOUR.NAMESPACE.DatePicker", {
    renderer : {},
    init: function() {
        sap.m.DatePicker.prototype.init.apply(this);
    },
    setDateValue : function(){}
});

<mvc:View xmlns="sap.m" controllerName="YOUR.NAMESPACE.controller.VIEW" 
          xmlns:custom="YOUR.NAMESPACE">
    <custom:DatePicker ... />
</mvc>

Upvotes: 0

Tim Malich
Tim Malich

Reputation: 1391

Thanks to bfmags I found a slightly different solution. I need to use this behaviour a couple of times in the UI and I'm using XML views. That's why I extended the sap control to overwrite the setDateValue method as bfmags suggested.

$.sap.declare('YOUR.NAMESPACE.DatePicker');
sap.m.DatePicker.extend("YOUR.NAMESPACE.DatePicker", {
    renderer : {},
    init: function() {
        sap.m.DatePicker.prototype.init.apply(this);
    },
    setDateValue : function(){}
});

Simple XML View Example:

<mvc:View xmlns="sap.m" controllerName="YOUR.NAMESPACE.controller.VIEW" xmlns:custom="YOUR.NAMESPACE">
    <custom:DatePicker 
        value="{
            path : 'YourModel>YourDate', 
            type: 'sap.ui.model.type.Date',
            formatOptions: {
                pattern: 'dd.MM.yyyy'
            }
        }"
    />
</mvc:View>

Upvotes: 2

Related Questions