2016-06-09 2 views
2

Кто-нибудь знает, как сделать управление SAPUI5 sap.m.DatePicker только для чтения? Я хотел бы показать пользователю стандартный пользовательский интерфейс календаря, если он нажмет на значок маленького календаря , но пользователю не разрешается фактически изменять дату.SAPUI5 Datepicker только для чтения

Единственным обходным решением, которое я нашел до сих пор, является присоединение функции к событию change и сброс значения в исходное значение. Но это нехорошо и красиво.

Вот пример JSBin с 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

ответ

1
  • переопределение метода .setDateValue() для экземпляра отключит выбор даты.

sap.m.DatePicker исходный код на github стоит посмотреть.

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

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


  • расширение контроля сока, чтобы перезаписать метод setDateValue, окончательное решение по @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> 
2

Благодаря bfmags я нашел немного другое решение. Мне нужно использовать это поведение пару раз в пользовательском интерфейсе, и я использую представления XML. Вот почему я расширил управление sap, чтобы перезаписать метод setDateValue, как предлагалось bfmags.

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

Простой XML Просмотр Пример:

<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> 
Смежные вопросы