Logo Squiz Matrix Community

Datetime Design Area

Last Updated: 03 Jan 2018

design_area_datetime|asset|5.4.4.0

This design area allows you to display either the date and/or time when the page was last updated or the current date and/or time.

Bookmarks to the headings on this page:

  1. Set Variables
  2. Example

An example of the Datetime design area is shown below.

<MySource_AREA id_name="page_modified" design_area="datetime">
  <MySource_SET name="format" value="F j, Y, g:i a" />
  <MySource_SET name="datetime" value="updated" />
</MySource>

Set Variables

The set variables available for the Datetime design area are as follows:

  • format: this variable allows you to format the date and time that is displayed in the design. The format of the date is in PHP date format (ref: PHP: Date Manual) and by default, it is set to h:ia d/m/Y, which is hour:minute[am/pm] day/month/year. The example shown below sets the format to F j, Y, which is month (in words) day, year.
    <MySource_AREA id_name="date_time_area" design_area="datetime">
    <MySource_SET name="format" value="F j, Y" />
    </MySource> 
  • datetime: this variable allows you to set which date and/or time to show. The values that are available are as follows:
    • now: this will show the current date and/or time.
      <MySource_AREA id_name="date_time_area" design_area="datetime">
      <MySource_SET name="datetime" value="now" />
      </MySource> 
    • updated: this will show the date and/or time when the page was last modified (i.e. the last time the Commit button was clicked).
      <MySource_AREA id_name="date_time_area" design_area="datetime">
        <MySource_SET name="datetime" value="updated" />
      </MySource> 
    • created: this will show the date and/or time when the page was created.
      <MySource_AREA id_name="date_time_area" design_area="datetime">
      <MySource_SET name="datetime" value="created" />
      </MySource> 
    • published: this will show the date and/or time when the page was last published (i.e. the Status of the page was changed to Live).
      <MySource_AREA id_name="date_time_area" design_area="datetime">
      <MySource_SET name="datetime" value="published" />
      </MySource> 
    By default, this variable is set to now.

Example

Below is the HTML code that was added to the static HTML file to show where the datetime design area should go in the design.

<div id="footer">
  <p class="right">
    Last Updated: <!-- Last updated design area to go here-->
  </p>
</div> 

The required code for the Datetime design area is added, as shown below.

<div id="footer">
<p class="right">
 Last Updated:
<MySource_AREA id_name="page_modified" design_area="datetime">
<MySource_SET name="format" value="F j, Y, g:i a" />
<MySource_SET name="datetime" value="updated" />
</MySource_AREA>
<p> 
</div>

The date and time of when the page was last updated will now appear in the design.

The Datetime in the Design of a Site
The date and time in the Design of a Site

Designs

Chapters

  1. Steps to Creating a Design
  2. Design Asset
  3. Design Customisations
  4. Design Tags
  5. Asset Lineage Design Area
  6. Body Design Area
  7. Declared Vars Design Area
  8. Login Form Design Area
  9. Password Change Form Design Area
  10. Menu Normal Design Area
  11. Metadata Design Area
  12. Nest Content Design Area
  13. Show If Design Area
  14. Exit Design Area
  15. CSRF Token
  16. Global Variables
  17. Using Alternate Designs
  18. CSS Design File
  19. SCSS Design File

Appendices

Send Feedback

Noticed an error?
Want to suggest an improvement?

Let Us Know

The Latest

Tutorials

Feedback

Let Us Know What You Think

Let us know if you spot any errors or if you have any ideas on how we can improve the Matrix Community Website.

Contact Squiz for Demo

Let us show you the true power of Squiz Matrix by giving you a personalised demonstration.

Contact Squiz