Date element

Shows a date picker element.

Contents

• Options
• Formatting and Time
• Formats
• Advanced
  • Only allow future dates to be selected
  • Only allow this years dates
  • Only allow the last Thursday of the month
  • Only allow the second Thursday of the month
  • Only allow 30 days backward and forward from the current day
  • Emulate a read only field
  • Concat Date Element with Time Zone
  • PHP Allow Dates

Options

• 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 and 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:

• Picker: Which time picker to use. 'Numbers' is a scrolling numbers based picker, 'Clock' is a clock face based picker (which doesn't support seconds).

• Show Seconds: Show seconds (format H:i:s) or not (format H:i).

• 24 Hour: Display as 24 hour (0:00 through 23:59) or not (0:00 AM though 11:59 PM).

• Time bootstrap class: The bootstrap class to assign to the time selector's field.

• Placeholder: HTML 5 placeholder text.

Formats

• Store date as(Armazenar data como): 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(Formato da lista): The formatting string to use when rendering the element's data in the list view, - Fabrik 3.0 see http://php.net/strftime for the full list of formatting options. - Fabrik 3.1 + see http://php.net/manual/function.date.php

• Form format(Formato do formulário): The formatting string to use when rendering the element's data in the form view - Fabrik 3.0 see http://php.net/strftime for the full list of formatting options. - Fabrik 3.1 + see http://php.net/manual/function.date.php

• Apply mask?(Aplicar máscara?):

• Default to current date(Padrão para a data atual): Default to the current date.

• Always return today's date(Sempre retornar a data de hoje): 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(Primeiro dia da semana): Which day is defined as the first day of the week, use 0 for Sunday, 1 for Monday etc.

• Allow typing in field(Permitir digitação no campo): 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(Importar formato CSV): 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

• After Ajax Validation: Useful if the format or javascript code changes the default values of the Date element. Furthermore, it will only be effective for cases where the 'Toogle Submit' form functionality is active, in this way, if set to 'No' the element will not be validated after ajax validations of other elements, thus preventing changes in their values.

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

• PHP Allow date function: An eval'd piece of PHP code, which is run before the calendar is loaded. Return an array of dates you wish to be selectable. Form's data is available in $data. Optionally append |classname to the date if you want classname to be applied to that cell on the calendar.

• Watch: Watch this element, if it changes value then an ajax request is fired and the PHP Allow date code is re-run.

Here are some examples of how this can be used.

Only allow future dates to be selected

Code (JavaScript):

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

Only allow this years dates

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

Code (JavaScript):

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

Only allow the second Thursday of the month

Code (Text):

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

Only allow 30 days backward and forward from the current day

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

• Set the "Allow typing in field" to No
• 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

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.

Code (PHP):

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

Code (Text):

  $myDb = JFactory::getDbo();
  $myQuery = $myDb->getQuery(true);
  $myQuery
      ->select ('DATE(book_bookingstartdate)')
      ->from('fab_booking');
  $myDb->setQuery($myQuery);
  $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';