Date Field

Overview

The date field is a standard textbox widget with a date picker positioned next to the input field. The date picker allows you to select a date to be placed within the textbox.

Validation (Rich UI Only)

Please visit the Validation and Error Messages page.

Field Binding Dialog (Rich UI Only)

Please visit the Field Binding page.

Date Formatting Properties

Date Format Property - This property is used to set a specific format of a date field widget. (Genie Only)

This property can also be defined for all date fields in Genie by the default date format setting in the Genie Administrator. If no date is specified the default date format of 'MM/DD/YY' will be used.

In a Rich UI application the date format can be set by opening the binding dialog and selecting the Date field formatting. The date can be set from multiple formats or certain locales. (Rich UI Only)

The default date used in a Rich UI application can be set as well using the Default Date Format configuration option. If no option is set from the binding dialog or by using the configuration option the default 'MM/DD/YY' will be used.

Show Today Option - if this property is enabled, a button will appear to make it easy to navigate to today's date.

Beginning with Profound UI 6, Fix Pack 13.0, the "show today option" property also has the ability to automatically select the current date in the text field when the today option is clicked.

Show Week Number Option - if enabled, a new column will be added showing the week number within the year, starting the first week of January.

To set a different starting date use pui["week number calculator"] = function(startdate) - startdate being the current date. This allows you to write a custom function that calculates and returns the week number for each week row.

The example below shows a way to set week #1 to the first week in Febuary:

pui["week number calculator"] = function(startdate){
     
      // Calculate the first Sunday in Feb

    var year = startdate.getFullYear();
    if (startdate.getMonth() == 0) year -= 1;

    var firstSunFeb = new Date(year, 1, 1); //1,1 = feb 1st
    while (firstSunFeb.getDay() != 0) {
        firstSunFeb.setDate(firstSunFeb.getDate() + 1); //adds one until it gets a Sunday
    }

    var dateDiff = Math.round((startdate.getTime() - firstSunFeb.getTime())/86400000);
    var weekNum = parseInt(dateDiff / 7) + 1;

    return weekNum;
}

Which results in this:

Calendar Position Option - Sets where the popup calendar will appear relative to the calendar icon. If it it too close to an edge, the position will be adjusted so as not to get cut off.

By default the calendar appears to the right of the icon. Setting it to "Right" or null will also position it there.