Skip to Content

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.

3 Comments

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

  1. 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) 

Leave a Reply