1. "Fabrik 4" helpers needed!

    You are invited to join other community members active in coding, maintaining and improving Fabrik. Please visit https://fabrik.help for more information!
    Dismiss Notice

Date element

Mar 27, 2018
Date element
  • Shows a date picker element.

    Options (top)

    • Hidden - sets the date to be rendered as a hidden field
    • Default - The default value to populate the element with. If the eval option is selected then this should contain a PHP statement
    • Eval - If set to yes then the value entered in the default field is taken to be a PHP statement and is evaluated as such. Element default examples.

    Formatting & Time (top)

    • Bootstrap class - defines the width of the date field
    • Show time selector - show an additional time selector next to the date picker - an example of how this looks is shown below:
    • Time format - The PHP date format string to use when formatting the time part of the data (applicable only to the form view)
    • Time bootstrap class - defines the width of the time field.


    • Store date as - UTC stores the date as the universal time (this is generally the recommended option) / Local time - time based on your site's timezone. In both cases times are displayed with the site's timezone applied.
    • List format - The formatting string to use when rendering the element's data in the list view,
    • Form format- The formatting string to use when rendering the element's data in the form view
    • Default to current date - Default to the current date
    • Always return today's date - Regardless of any other setting the element will always show today's date. Useful when you want to record the date/time that the record was updated.
    • First Week day - Which day is defined as the first day of the week, use 0 for Sunday, 1 for Monday etc
    • Allow typing in field - If set to no then users can not manually type in data into the fields, but are obliged to use the widgets to enter the date.
    • CSV import format - Date format in CSV import files.
      • Normal: Fabrik assumes your CSV date is in your specified 'form format', and in J!'s specified time zone.
      • MySQL, Local: your CSV dates must be in MySQL format (YYYY/MM/DD HH:MM:SS) with J!'s selected local time zone already applied.
      • MySQL, GMT': dates must be in MySQL format, in the GMT (UTC) time zone.

    Advanced (top)

    • Advanced formats - When using certain 'non standard' format strings for your date formats, you may find that dates on your form inputs do not behave correctly. If this happens, try enabling this option, which will include a more advanced format handling Javascript library. This adds about 40k to the page load, which is why we don't enable it by default.

    • Allow date function - An eval'ed piece of Javascript code, which is run on each day when the calendar is displayed. You have access to the 'date' variable which is the date being tested. Set a variable called 'result' to:
      • true to stop/prevent this date from being selected;
      • false to allow this date to be selected;
      • a class name to allow this date to be selected, and apply that class name to the day's cell on the calendar to e.g. show the date in a specific colour.

    Here are some examples of how this can be used.

    Only allow future dates to be selected(top)

    Code (Javascript):

    var diff = new Date().compare(new Date(date));
    var result = diff < 0 ?true : false;

    Only allow this years dates(top)

    Code (Javascript):

    var testYear = new Date(date).format('%Y').toInt();
    var thisYear = new Date().format('%Y').toInt();
    var result  = testYear !== thisYear;

    Only allow the last Thursday of the month(top)

    Code (Javascript):

    var lastThursday = new Date(date);
    while (lastThursday.getDay() != 4) {
       lastThursday.setDate(lastThursday.getDate() - 1);
    var result = date.getDate() != lastThursday.getDate();

    Only allow the second Thursday of the month(top)

    Code (Text):

    var secondThursday = new Date(date);
    var thursdays=0;
    while (thursdays < 2) {
       secondThursday.setDate(secondThursday.getDate() + 1);
       if (secondThursday.getDay() == 4) {
    var result = date.getDate() != secondThursday.getDate();

    Only allow 30 days backward and forward from the current day(top)

    Code (Text):

    var result = false;
    var d = new Date(date);
    var d30 = new Date();
    d30.setDate(d30.getDate() + 30);
    if (d > d30) {
       result = true;
    else {
       d30 = new Date();
       d30.setDate(d30.getDate() - 30);
       if (d < d30) {
         result = true;

    Emulate a "read only" field(top)

    1. Set the "Allow typing in field" to No
    2. In the Allow Date Function' section enter:
    Code (Javascript):

    var result = true;
    This will prevent the user from entering a manual date and also prevent them from picking a date using the date selector thereby achieving a "read only" state.

    Concat Date Element with Time Zone(top)

    When using a "concat label" for a join element, if you want to use a date in the label, you may need to apply your TZ.

    DATE_FORMAT(CONVERT_TZ(my_table_name.talk_date,'+00:00','+2:00'), '%d-%m-%Y'),' - ',gmy_table_name.talk_name

    PHP Allow Dates(top)

    You can use the PHP Allow Dates feature to build an array of dates you wish to restrict the date picker to. In this example, we want to build an array of dates from this year, which have not already been used in a field in the any row of the table ...

    Code (Text):

    $myDb = JFactory::getDbo();
    $myQuery = $myDb->getQuery(true);
        ->select ('DATE(book_bookingstartdate)')
    $bookedDates = $myDb->loadColumn();

    $begin = new DateTime();
    $end = new DateTime('2016-12-31');

    $interval = DateInterval::createFromDateString('1 day');
    $period = new DatePeriod($begin, $interval, $end);

    $myAllowedDates = array();

    foreach( $period as $dt ) {
        $thisDate = $dt->format("Y-m-d");
        if (!in_array($thisDate, $bookedDates)) {
        $myAllowedDates[] = $thisDate;
    return $myAllowedDates;
    You may optionally append |classname to the date, to apply that class name to that day's cell on the calendar ...

    Code (Text):

        $myAllowedDates[] = $thisDate . '|allowedDate';
  • Loading...