Adding a Day Picker widget to a Form

 

Prerequisites

DesignBAIS has been installed on your server.

 

Objectives

  • Add a Day Picker to a DesignBAIS RD Form.

 

Create the Day Picker form

The procedure to follow to add a day picker element to your RD form is:

  • Create a new page
  • CTRL+K to create an HTML segment
  • CTRL+Q to edit that segment.  Replace <p>Lorem…</p> with <div id="delivery"></div>.
  • Save the form

The form element will display as an empty form row.

If you edit the code behind the HTML form element it will look like this:

<div class="dbcol col-md-12 dbcolhilite">
    <div class="dbform form-horizontal">
        <div class="dbformgroup form-group">
            <div dbtype="segment" class="html-text" id="d370216">
                <div id="delivery"></div>
            </div>
        </div>
    </div>
</div>

  • From the File menu select Properties and add a hidden field to the form. For this example you can assign an id of hiddenId.
  • Publish the page.
  • In Form Data Link option link your page to a form. Typically the HTML form element is linked to a work field on your database file. This field is used to pass the date selected from the web page to the database.

 

As a guide the set up of the Form Data Link is shown below.

In the AFTER DISPLAY paragraph of your basic code you will need code similar to the following:

         CASE SCREEN.NO = "DAYPICKER"

            PICKER.HEADING = "Please select the day on which you wish to visit" 
            AJX.FUNC = "DP"            ;* dbDayPicker
            AJX.DATAIN = "delivery"    ;* ID of the <div> container in the RD page to be used for the day picker
            AJX.DATAIN<3,1,-1> = 'startDate'          ; AJX.DATAIN<4,1,-1> = DATE()
            AJX.DATAIN<3,1,-1> = 'endDate'            ; AJX.DATAIN<4,1,-1> = DATE()+90
            AJX.DATAIN<3,1,-1> = 'selectedDate'       ; AJX.DATAIN<4,1,-1> = '""'
            AJX.DATAIN<3,1,-1> = 'pickerTitle'        ; AJX.DATAIN<4,1,-1> = PICKER.HEADING
            AJX.DATAIN<3,1,-1> = 'displayDate'        ; AJX.DATAIN<4,1,-1> = '27-Oct-2020'
            AJX.DATAIN<3,1,-1> = 'disabledArray'      ; AJX.DATAIN<4,1,-1> = '["14-Nov-2020","12-Nov-2020"]'
            AJX.DATAIN<3,1,-1> = 'customAttributeArray' ; AJX.DATAIN<4,1,-1> = '[3001, 9010, 2111, 3101, 1100]'
            * hiddenId is the ID of the hidden field added to the RD page to pass data back to the database
            AJX.DATAIN<3,1,-1> = 'onselect'           ; AJX.DATAIN<4,1,-1> = 'function ($el, d) {}'
            AJX.DATAIN<3,1,-1> = 'onanimate'          ; AJX.DATAIN<4,1,-1> = 'function (b) { }'
            AJX.DATAIN<3,1,-1> = 'hiddenID'           ; AJX.DATAIN<4,1,-1> = 'hiddenId'
            CALL DBI.G.AJXCMD(AJX.FUNC,AJX.DATAIN)

In the VALIDATION paragraph of your basic code you will need code similar to the following:

CASE EVENTSOURCE="DEM.WORK1.WK" AND SCREEN.NO = "DAYPICKER"
      AJX.FUNC = "DPSH"          ;* dbDayPickerSetHTML
      AJX.DATAIN = "delivery"    ;* ID of the <div> container in the RD page to be used for the day picker
      AJX.DATAIN<3,1,-1> = '<div style="color:green;">You have selected date: ':DBVALUE:'</div>'
      CALL DBI.G.AJXCMD(AJX.FUNC,AJX.DATAIN)

The day picker display is shown below.