Skip to main content  
  Easy400   |       iSeries home
Public Source
 
 
About it
Download

 
jsDatePick  
by Giovanni B. Perotti

(This documentation applies to the July 13, 2020 release)



Some applications may have the need to fill in input date fields by picking up values from a pop-up calendar.

You may find plenty of tools to accomplish this job through a simple Google search.

That is exactly what I did. I picked up some GNU (General Public License) code from javascriptcalendar.org and I wrapped it into an IBM i IFS directory named jsDatePick.
As I wanted to set up some examples, I took two of them among those available and made them work through some CGI programs.
By looking at their HTML/Javascript sources and related RPG sources, you may implement pick-up calendar support in your CGI programs.

There are two types of examples:

  1. Example 1 and Example 2 are the recommended ones. They use the most powerful features of JQuery JsDatePick function, thus reducing the amount of Javascript code needed to implement date picking.
  2. Example 3 uses some basic features of JQuery JsDatePick function and leaves to some developer javascript the job of formatting a selected date and copying it into the desired input field.
You are suggested to display the source of an example browser page to find out the way to implement your own solutions.

To install this utility for CGI use,

  1. Download it and follow the installation instructions bundled in its zip file
  2. Add to an HTTP instance of yours the HTTP directives from file /jsdatepick/http_directives.txt.

Date format

  • Supported date formats: DMY, MDY, YMD.
  • Date separator characters: / , - , *none
  • Year length: 2 or 4 characters.

Service program JSDATEPICK/JSDATEPICK
This service program exports two procedures used in programs MYEXAMPLE1 and MYEXAMPLE2 to make easier date formatting: JsDateFmt() and JsDateVaL.
See the following examples:

  1. Procedure JsDateFmt()
     /copy jsdatepick/qrpglesrc,hspecs
     /copy jsdatepick/qrpglesrc,hspecsbnd
     /copy jsdatepick/qrpglesrc,prototypeb
     /copy jsdatepick/qrpglesrc,protojspck
     /copy jsdatepick/qrpglesrc,usec
     /copy jsdatepick/qrpglesrc,variables3
     * Procedure JsDateFmt
     * - Returns the date format to be used in JQuery function
     *   JsDatePick({useMode:2,target:inputField,dateFormat:"/%datefmt%/"})
     * In the following example it returns value '%m/%d/%Y' to variable outDatefmt 
    D inpDatefmt      s              3    inz('MDY')
    D inpYearlen      s              1    inz('4')
    D inpDatesep      s              1    inz('/');                                
    D outDatefmt      s              8    varying                                  
     /free                                                                         
        // ... ... ...                                                          
        outDatefmt=JsDateFmt(inpDatefmt:inpYearlen:inpDatesep);                 
        updhtmlvar('datefmt':outDatefmt)                                        
        // ... ... ...
    Figure 1 - Example of using procedure JsDateFmt()

  2. Procedure JsDateVal()
     /copy jsdatepick/qrpglesrc,hspecs
     /copy jsdatepick/qrpglesrc,hspecsbnd
     /copy jsdatepick/qrpglesrc,prototypeb
     /copy jsdatepick/qrpglesrc,protojspck
     /copy jsdatepick/qrpglesrc,usec
     /copy jsdatepick/qrpglesrc,variables3
      * Procedure JsDateVal       
      * - Converts an input timestamp to a date value with the same format as      
      *   generated by function
      *              JsDatePick({useMode:2,...})
      * In the following example it returns a value
      * like '2021-12-23' to variable outDateVal
     D inpStamp        s               z 
     D inpDatefmt      s              3    inz('MDY')
     D inpYearlen      s              1    inz('4')
     D inpDatesep      s              1    inz('-')
     D outDateVal      s             10    varying
      /free
        // ... ... ...
        inpStamp=%timestamp();
        outDateVal=JsDateVal(inpStamp:inpDateFmt:inpYearLen:inpDateSep);
        updhtmlvar('field1Value':oputDateVal);
        // ... ... ...
    Figure 2 - Example of using procedure JsDateVal()


    contact us contact us