Skip to Content

Trigger Server roundtrip for date field

February 9, 2015 | 1,180 Views |
 date pickersap crm web uiweb ui
Follow

The date picker for a date input field is made using javascript on client side. To trigger a round trip , you have to write some code on client side.

Code mentioned below has to be written on .htm page of the view.

 

<script>

thtmlbCalendar.pick = function(e) {

var o = (e.target) ? e.target : e.srcElement;

var sId = this.lastInstance;

var oInput = thtmlbGetElement(sId);

if (o.id === “currentDate”) {

e.cancelBubble=true;

return;

}

var currentDateValue = document.getElementById(‘currentDate’).value;

while (o.tagName != “TD”) {

o = o.parentNode;

if (o == null){

return;

}

}

var sDay = o.id;

if (sDay==null || sDay==“”){

return;

}

if (sDay) {

var aDate = sDay.split(“-“);

var arrValue = [];

arrValue[0]=parseInt(aDate[2]);

arrValue[1]=parseInt(aDate[1]);

arrValue[2]=parseInt(aDate[0], 10);

var newValue = this.getFormattedDate(arrValue[0], arrValue[1], arrValue[2]);

thtmlbSetInputFieldAttribute(oInput, ‘encodedValue’, newValue);

e.cancelBubble=true;

oInput.focus();

this.hide();

var element_event = sId + “:submitonenter”;

htmlbSL(this,2,element_event,‘0’);

}

};

</script>

 

You don’t need to change anything in the above code.

 

If you want to avoid writing the code on .htm page then you can also write the above code in a js file and upload in your component through tcode se80->MIME repository->SAP->BC->BSP->SAP->Your component name->right click for Import MIME Objects->select your JS file.

After the js file upload is complete, include js file in your htm page.

 

<script type=“text/javascript” src=“/sap/bc/bsp/sap/your_compoent_name/your_js_name.js”></script>

 

Thanks and Regards,

Ritu

To report this post you need to login first.

4 Comments

You must be Logged on to comment or reply to a post.

  3. André Borck

    Thanks for this solution. I have developed it a bit further.

    Sharing my  approach:

    <script>
   $(
     function( ){
       var dateField = thtmlbGetElement("<%= controller->component_id %>_myDateField");
 
       if ( dateField ){
         dateField.addEventListener( "keyup", eventHandlerFct );
 
         var oldPickFct = thtmlbCalendar.pick;
         thtmlbCalendar.pick = function( e ){
           oldPickFct.apply( this, new Array( e ) );
           eventHandlerFct( );
         };
       }
 
       function eventHandlerFct( e ){

         if ( e ){
           var code = ( e.keyCode || e.which );
 
           if ( code == 37 || code == 38 || code == 39 || code == 40 )
             return;
         }
 
         var strLen = dateField.value.toString().length;
         if ( strLen == 0 || strLen == 10 ){
           var inpFieldDate = dateField;
           var inpFieldDateEventName = inpFieldDate.id + ":submitonenter";
           return htmlbSL( inpFieldDate, 2, inpFieldDateEventName, '0');
         }
       }
     }
   );
 </script>

    This will trigger submitonenter when the user picks a date with the date picker and also when entering a value in the date input field.

    As you see the main part has been reduced to:

    var oldPickFct = thtmlbCalendar.pick;
thtmlbCalendar.pick = function( e ){
  oldPickFct.apply( this, new Array( e ) );
  eventHandlerFct( );
};
    (0) 
  4. Former Member

    Hi Andre,

    I tried implementing the same for table view but its nor working. Do you have idea how can it work for a date field on a table view? I think there is an issue with the element id. My table field name is ‘CONTSTART’ so is the below statement correct?

    ” var dateField = thtmlbGetElement(“<%= controller->component_id %>CONTSTART”);”

     

    Thanks & Regards,

    Ajeet Gautam

     

    (0) 

Leave a Reply