Change grid date picker format

Dates in ABPro are stored is a fixed format. The format returned by the date pickers cannot be changed or it will break ABPro.

Date picker display format is configurable starting with ABPro 3.0.3


This How-To shows how to hide the date picker output and display a different format. This means ABPro is happy because the date format is correct but the displayed date format can be whatever you like.

This requires 2 steps:

  1. Add a new input box and hide the existing one.
  2. Add some javascript code to update the the new box with a date in a different format


Step 1

Edit the view for the  booking screen you are using. I will show the GAD here so the file is:

Around line 818 look for:

<td><?php echo JText::_('RS1_GAD_SCRN_DATE');?> <input readonly="readonly" name="grid_date" id="grid_date" type="text"


Add new input 'display_grid_date' and change the original 'grid_date' input to type 'hidden':

<td><?php echo JText::_('RS1_GAD_SCRN_DATE');?> <input type="text" readonly="readonly" id="display_grid_date" size="10" class="sv_ts_request_text"/>
<input readonly="readonly" name="grid_date" id="grid_date" type="hidden"


Step 2:

Edit file \components\com_rsappt_pro2\script.js

Around line 956 look for:

function buildTable(){


Add the red code:

function buildTable(){
    var display_date = new Date.parse(document.getElementById("grid_date").value);
    document.getElementById("display_grid_date").value = display_date.toString("d-M-yyyy");

Set the date format string to the format you wish displayed.