Table of Contents

Datepicker

Overview

Datepicker is the name used to describe a Textbox that has been functionally extended to input dates.

To add a Datepicker element, go to Base Types > Datepicker and add it to the canvas.

Using the default date-format of yy-mm-dd, the suggested width of the datepicker is 80 pixels to 100 pixels. If your date-format requires more space, such as using long names for months, the width of the Datepicker can be increased. You should test the width of your datepicker with September 30, as that date is the longest date string.

Type of Data Stored

A Datepicker can store a single date as a string.

The date value displayed in a textbox can be controlled by using the date-format attribute.

A Datepicker does not allow a user to type in a date value. However, using the backspace or delete key will clear a datepicker.

A Datepicker has no line wrapping. If the date format exceeds the width of the Datepicker, it will be hidden on the right side of the textbox. Navigating the caret to the right will make the Datepicker content scroll, however clicking off of the Datepicker will make it scroll back to the beginning.

Attributes

Attribute Description
description This is the description of the element used by other modules in the clevr platform. For more information on how description is used, please read this article.

A description should be placed on all input elements, to allow them to be identifiable in those modules.
placeholder This is an temporary hint that can be displayed in a datepicker before content in inputted. When using placeholder, do not place important information about what the inputted data represents, as once the element is populated the placeholder will disappear.

For more information on the proper use of placeholders, please read this article.
date-format

The date-format attribute allows you to change how the date is visually represented to the user. If date-format is not specified, it will default to yy-mm-dd.

This attribute does not change how the date is formatted in the database.

The date-format can be changed at any time and will not affect the data currently stored for the element.

The attribute can define any combination of the following groups:

  • d – day of month (no leading zero)

  • dd – day of month (two digit)

  • o – day of the year (no leading zeros)

  • oo – day of the year (three digit)

  • D – day name short

  • DD – day name long

  • m – month of year (no leading zero)

  • mm – month of year (two digit)

  • M – month name short

  • MM – month name long

  • y – year (two digit)

  • yy – year (four digit)

  • @ – Unix timestamp (ms since 01/01/1970)

  • ! – Windows ticks (100ns since 01/01/0001)

  • ‘…’ – literal text

  • ” – single quote

  • anything else – literal text
disabled

This will disable the element and prevent modification for all roles, regardless of applied permissions.

The disabled attribute should only ever have the value “true” applied. A value of “false” will still make an element disabled.

The disabled attribute differs from readonly as it visually greys-out the element to indicate that it is disabled. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element.
readonly

This will disable the element and prevent modification for all roles, regardless of applied permissions.

The readonly attribute should only ever have the value “true” applied. A value of “false” will still make an element readonly.

The readonly attribute differs from disabled as it provides no visual feedback to the user that the element can not be modified. Utilizing disabled is preferrable to readonly, as it provides visual feedback to the user for why they can’t modify the element.

Import Data

Importing data into a datepicker can be difficult. The format of the date in the demographics file provided must exactly match the default yy-mm-dd format, or the import will fail.

Because the demographics file must use the default date format, the format of a datepicker that is imported into must also be left at the default format.

If the imported date format doesn’t match the default, when the datepicker is opened it will show the current date instead of having the date imported as the selected date.

For more information about setting up elements for Import Data, please read the lesson called “SIS and GDI Import” in Level 2.

Compatible Common Functions

  • FCF.restrictDatePicker
  • FCF.updateDatepickerYearRange
  • FCF.time.offsetDate
  • updateVal
  • updateDate