How-To

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.

#EDIT#
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:
\components\com_rsappt_pro2\views\booking_screen_gad\tmpl\default.php

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(){
    if(document.getElementById("sv_apptpro_request_gad_mobile")!=null){

 

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");
if(document.getElementById("sv_apptpro_request_gad_mobile")!=null){

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