Date element

  • Views Views: 30,222
  • Last updated Last updated:


      Access element (+)
      Birthday element
      Button element
      Calculation element
      Captcha element
      Checkbox element
      Colour Picker element
      Count element (+)
      Database join element
      Date element
      Digg element
      Display text element
      Dropdown element
      Facebook Like element
      Field element
      File Upload element
      Folder element
      Google Map element
      Image element
         Image databese join
      Internal id element
      IP element
      J!Date element
      Kaltura element
      Link element
      Notes element
      OpenStreetMap element
      Picklist element
      Radio Button element
      Rating element
      Sequence element
      Slider element
      Tags element
      Textarea element
      Thumbs element
      Time element
      Timer element
      Timestamp element
      Total element
      User element
      User group element
      Video element
      View level element
      YesNo element
      Youtube element
      Akismet validation
      Is Email validation
      Is Not validation
      Is Numeric validation
      Not empty validation
      PHP validation
      Rsa id
  • Shows a date picker element.



    • 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​


    • 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 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​

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

    Only allow this years dates​

    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​

    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​


    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​


    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​
    1. Set the "Allow typing in field" to No
    2. In the Allow Date Function' section enter:

    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​

    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​

    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 ...


    $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 ...


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