• Home
• SAP Help
• Core ABAP
• ALV
• Web based
• Repository
• Enhancement
• Comments & Questions
• Resources
• ☰

Adding a JavaScript date selection field to a BSP

Step 1 - Add JAVAScript code to view
Insert the following code in BOLD into the htmlb header area of the BSP View, also demonstrates code
for creating simple styles (CSS).

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content design="design2003">
  <htmlb:page title = " ">   

<htmlb:documentHead title = "My Title">
<!--    CSS styles -->
   <style type="text/css">
     .textTOP{vertical-align:top}
     .grey {FONT-SIZE: 14px;color: #666;}
   </style>

<!--    Removes 'dd/mm/yyyy' string from date field when user clicks
        to enter data -->
   <SCRIPT TYPE="text/javascript">
   <!--
   function setinput( field )
   {
     if ( field.value == 'dd/mm/yyyy' ){
      field.value = '';
      field.className = 'black';
     }
   }
   //-->
   </SCRIPT>

<!--   Declare Scripts for controlling the date selection, actual code
       for functions will be contained in the script.htm page fragment
       (not created yet!!)  -->
  <SCRIPT TYPE="text/javascript">
   <!--
    <%@ include file = "script.htm" %>
    //-->
  </SCRIPT>

  <SCRIPT LANGUAGE="JavaScript">
    var cal = new CalendarPopup();
  </SCRIPT>
</htmlb:documentHead>

    <htmlb:form>

Step 2 - Create page fragment
Use SE80 and create new page within BSP application, call it script and create it as a page
fragment.



Step 3 - Populate Page fagment
Now download the following code (Right click->Save Target As..) and insert it into the page fragment. Save
and activate it!




Step 4 - Insert date field onto View
Now return to the View (i.e. main1.htm) and insert the code with displays the date field onto the view. This can be found below
in BOLD, the other code is there to ensure it is inserted into the correct place. Please note: your final View coding
should look somthing like this this.
    <htmlb:form id="formlist"> 
      <htmlb:textView     text          = "Purchase order"
                          design        = "EMPHASIZED" />

      <htmlb:inputField   id            = "pord"
                          invalid       = "false"
                          value         = "<%=p_ord->retvalue%>"
                          required      = "true"/><BR>

      <INPUT class="grey" TYPE="text" NAME="date1" VALUE="dd/mm/yyyy"  SIZE=25
             onFocus="setinput( this )">
      <A HREF="#" onClick="cal.select(document.forms['formlist'].date1,'anchor1',
                          'dd/MM/yyyy'); return false;"
      NAME="anchor1" ID="anchor1"><img src="calimg.gif" border=0></A><BR>

      <htmlb:button       text          = "Press Me"
                          onClick       = "myClickHandler" />
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

Step 5 - Upload image for date dropdown
Save the following image to your computer   (Right click->Save picture as..). Now upload it into your BSP by Right clicking
the BSP name->create->MINE Object->Import. Ensure it is saved as 'calimg.gif'




Step 6 - Execute
Ensure the BSP is all active and test it. This is done by using the test function on the Controller object (i.e. main.do)




Creating a simple BSP using MVC techniques