1. NOTICE: If you are using Fabrik and update to Joomla 3.10, you will need to update to Fabrik 3.10. And, if you are using Fabrik, do not upgrade to Joomla 4, we do not have a supported version ready for release. More information on a release date coming soon. Also, please note that Fabrik 3.10 will not install on any Joomla sites less than 3.8.
    Dismiss Notice

How to turn a date element into a time element

Discussion in 'Hints, Tips and Tricks' started by cookn22, Mar 9, 2010.

  1. cookn22

    cookn22 Active Member

    Level: Professional
    I needed a 'time' element awhile ago and I figured out a way to do it with a modified date element. I just tried the same process below on the latest rev of Fabrik and it seems to work pretty well, but your mileage may vary.

    Here's my setup:
    MySQL: 5.1.41
    PHP: 5.3.1
    Fabrik: 2.0.x rev. 3062

    1. When you add a new fabrik table from an existing MySQL table it sets 'TIME' columns as date elements, but if you don't have it set up that way, go ahead and set your time column in MySQL to the TIME type and the corresponding fabrik element to a date element. You also want to make sure that 'Alter Existing Field Types' is set to 'No' in the table's settings (or tell fabrik not to modify the type of the column when you apply changes to the element. either way, you just want to make sure the column in MySQL stays as TIME)

    2. In the setting for the date element, set 'Show Time Selector' to 'Yes' and copy the value in 'Time Format' into the fields for 'Table Date Format' and 'Form Date Format'.

    3. Open up the Javascript tab and add a 'load' event. Past this javascript into the 'Code' text area:

    Code (Text):

    this.getElement('input[id*=_cal]').setStyle('display','none');
    this.getElement('img[id*=_cal_img]').setStyle('display','none');
     
    That's it! I hope this works for you :)

    If it doesn't work let me know; I might have just overlooked something in my instructions.

    Update:

    I hadn't noticed this before so it may be due to an update in fabrik after revision 3062, but in any case I'm getting a javascript error in the detail form view when using this trick. As well, in the detail view it is showing the value of the time element twice (ex: "7:16 pm 7:16 pm"). If you are using this trick and are having either of these problems, replace the above javascript in the element's settings with this:

    Code (Text):

    if(!$(document.body).getElement('.fabrikForm').hasClass('fabrikDetails'))
    {
         this.getElement('input[id*=_cal]').setStyle('display','none');
         this.getElement('img[id*=_cal_img]').setStyle('display','none');
    }else
    {
         var val = this.get('text').substring(0,8);
         this.set('text',val);
    }
     
    Replace the second argument in the .substring function with the length of the time values you are storing (ie. if your time format is %H:%M, put 5). The 8 value I'm using above is for a time format of %I:%M %p (ex. 10:10 pm).
     
    3 people like this.
  2. peamak

    peamak Moderator

    Level: Community
    Oops, didn't saw your post, approved now.
     
  3. Jaanus

    Jaanus Super Moderator

    Level: Community
    many Thanks, it looks useful, I will try it!
    Posted via Mobile Device
     
  4. cookn22

    cookn22 Active Member

    Level: Professional
    I should probably point out that that this method only really works correctly if the time format is %H:%M (or %H:%M:%S).

    Just in case anyone needs to do something like this, here is how to make a 12-hour time element, with AM/PM buttons in the widget (by modifying the fabrikDate element javascript):

    1. First, do all the steps in the OP (make sure the MySQL column type is TIME in phpmyadmin!), but instead of putting the default %H:%M in 'Time Format', 'Table Date Format' and 'Form Date Format' in the date element's settings, put %I:%M %p

    2. download the attached .zip and put the included .js file in root/includes/js (you can put this file somewhere else, of course, just make sure you make the necessary changes)

    3. Make a new custom form template for the form that has your time field. (I just copy/paste/rename the 'default' folder in root/components/com_fabrik/views/form/tmpl/). If you already have a custom template for your form, use that, you won't be making any major changes to the form template.

    4. Open up default.php for the custom form template and past this php code somewhere at the top
    Code (Text):

    <?php
    $root_str = str_replace('index.php','',$_SERVER['PHP_SELF']);
    echo '<script type="text/javascript" src="'.$root_str.'includes/js/fabrikdate_custom.js"></script>';
    ?>
     
    5. In the fabrik back-end, open up the settings for the form with the time field , click the Submission Plug-Ins tab and add a PHP plugin that runs onBeforeProcess. Past this code into the 'PHP Code to execute...' text-area:

    Code (Text):

    $time = JRequest::getVar('table_name___time_element_raw');
    $time = $time['time'];
    $time = date("H:i:s", strtotime($time));

    $time_raw = array();

    $time_raw['date'] = '2010-01-01'; //just needs to be any date in Y-m-d format
    $time_raw['time'] = $time;

    $formModel->updateFormData('table_name___time_element_raw', $time_raw);
     
    Replace 'table_name' above with the name of your table and 'time_element' with the name of your time element.

    That's it!

    A few caveats: While I just went through these steps on my joomla site with the latest rev. of fabrik and it worked fine, I do not guarantee that this will work for you! Also, the attached .js file is just the entire javascript for the fabrikDate element with some modifications. By including it in the custom form, it overwrites the fabrikdate class that is usually used. The code is based off an older revision (I have no idea which one) of the fabrikDate class, however it still seems to work just fine...which is to say, user beware!
     

    Attached Files:

    3 people like this.
  5. amilks

    amilks Active Member

    Level: Community
    Can someone approve the zip so I can make an AM/PM element? I thought I posted a request, but I don't see it.
     
  6. peamak

    peamak Moderator

    Level: Community
    Sorry for the delay, the attachment has been approved... I didn't know it needed a second approval...
     

Share This Page