AX1509
Using date pickers in Formatted Grids
You can use the DatePicker content tag within a Grid data source to allow users to select a date from a calendar control. The date picker control can be used to select any of the following:
- A full date (1/1/2019)
- A month/year combination (January 2019)
- A year (2019)
The DatePicker tag has no effect within the source file itself, but when the file is viewed as an Axiom form, the DatePicker tag will be resolved as an interactive date picker. The user can select a date from a calendar control, and this date will be submitted back to the source file.
Content tag syntax for date pickers
The syntax for the DatePicker content tag is as follows:
[DatePicker; TargetCell=CellAddress; FormState=KeyName; SharedVariable=VariableName; DatePickerType=Date/Month/Year; MinDate=Date; MaxDate=Date; AutoSubmit=Enabled/Disabled/Grid; Tooltip=Text; ColumnStyle=StyleName; Columns=Number; ReadOnly=True/False]
Parameters can be listed in any order after the DatePicker tag. Optional parameters can be omitted.
To create the tag, you can manually type it within a cell, or you can use the Data Source Assistant / Tag Editor. For more information, see Creating and editing content tags in Formatted Grids.
Parameter | Description |
---|---|
TargetCell |
The cell to place the selected date. You can specify the cell using one of the following options:
For more information, see Referencing cells in content tag parameters. The target cell cannot be the same cell that contains the DatePicker tag. The target cell can be anywhere in the spreadsheet and does not need to be visible within the formatted grid. The selected date is written to the target cell as an Excel date/time serial number. Keep in mind that the date picker allows users to clear the date and return a blank value. If the selected date is being used in calculations and/or to drive other components in the form, make sure to construct the relationship to accommodate a possible blank value. NOTES:
|
FormState |
The key name for the value to be stored in the form state. For example, StartDate. The name must be unique. It is best to define a name that relates to the specific purpose of this date picker. When a form state key name is defined, the user's selected date is not placed anywhere in the source file. Instead, it is stored in form state memory for the current file. If you need to reference the value within the form, you can use the GetFormState function to return the value into a cell. The FormState parameter should only be used if the form is intended to be used as a dialog in the Excel Client or the Windows Client, and you need to be able to pass values from the form to the currently active spreadsheet. For more information, see Passing values between an Axiom form and the active client spreadsheet (form state). |
SharedVariable |
The shared variable name to save the selected value as. For example, StartDate. When a variable name is defined, the user's selected date is not placed anywhere in the source file. Instead, it is saved to the variable list that is stored in memory for the shared form instance. If you need to reference the value within the form, you can use the GetSharedVariable function to return the value into a cell. The SharedVariable parameter should only be used if the form is intended to be used in an embedded form context (as either the parent form or a child form), and you need to share this value with other forms in the shared form instance. For more information, see Sharing variables between parent and child forms. |
DatePickerType |
Specifies the type of date value for selection:
The type determines the values for selection and the display of the selected value in the control. However, the return value is always a full date. See Handling date formats for more information. NOTE: When using the Data Source Assistant / Tag Editor, this option displays using the label Selection Type. |
AutoSubmit |
Optional. Specifies how interactive controls submit values back to the source file:
If omitted, the default behavior is Grid. |
MinDate |
Optional. Specify the earliest date that is valid for a user to select in the date picker. If specified, the calendar control will not allow the user to select a date that is earlier than this date. You can enter a valid date, or you can use a bracketed cell reference to read the date from the referenced cell. This approach is useful if you want to dynamically determine the date, because then the formula can be in the referenced cell instead needing to construct the tag using a formula. For more information, see Referencing cells in content tag parameters. When using the Data Source Assistant / Tag Editor, this parameter is labeled as Earliest Date. In this environment, you can use the Choose a date button [...] to open a calendar control and select a date, or you can type a date or a bracketed cell reference. NOTE: If the earliest date can change using a formula, and the selected date is now invalid due to the changed earliest date, then the date picker will display as blank rather than showing the invalid date. |
MaxDate |
Optional. Specify the latest date that is valid for a user to enter into the date picker. If specified, the calendar control will not allow the user to select a date that is later than this date. You can enter a valid date, or you can use a bracketed cell reference to read the date from the referenced cell. This approach is useful if you want to dynamically determine the date, because then the formula can be in the referenced cell instead needing to construct the tag using a formula. For more information, see Referencing cells in content tag parameters. When using the Data Source Assistant / Tag Editor, this parameter is labeled as Latest Date. In this environment, you can use the Choose a date button [...] to open a calendar control and select a date, or you can type a date or a bracketed cell reference. NOTE: If the latest date can change using a formula, and the selected date is now invalid due to the changed latest date, then the date picker will display as blank rather than showing the invalid date. |
Tooltip |
Optional. Specifies tooltip text to display when a user hovers the cursor over the cell contents. Alternatively, you can use a bracketed cell reference to read the tooltip text from the referenced cell. This approach is useful if you want to dynamically determine the text, because then the formula can be in the referenced cell instead needing to construct the tag using a formula. For more information, see Referencing cells in content tag parameters. |
ReadOnly |
Optional. Specifies whether the control is "active" (True/False). The default value, False, means that the control is active and that the user can select or clear a date as needed. If True, then the control becomes "frozen" and no further edits can be made. The control will display the current value of the target cell. This parameter can be used to control whether a user can edit the cell. Generally speaking, this parameter would only be used within a formula to dynamically enable / disable the check box. |
Columns |
Optional. Specifies how many columns the cell contents will span in the grid. If this parameter is omitted or set to 1, then content generated by the tag will only span the current column. If you want the content to span multiple columns, enter a number such as 2 to span 2 columns. The column span extends to the right. NOTE: The row and column styles used in the grid impact how the column span displays. For example, if the content in the starting column is left-aligned and does not naturally exceed the width of the starting column, then the spanned columns will simply be blank because no content is extending to those columns. However, if the content is long enough to extend out of the starting column, or if the content has external borders (such as a text box), or if the content is center-aligned or right-aligned, then content will display in the spanned columns. |
ColumnStyle |
Optional. Specifies one or more column styles to apply to the current cell. The specified styles override the current column styles set by the Enter one or more valid column style names, separated by commas. If you are using the Data Source Assistant / Tag Editor, you can click the [...] button to open the Choose Styles dialog and select from available styles. The available styles depend on the skin specified for the form. For more information, see Using row and column styles with Formatted Grids. Alternatively, you can use a bracketed cell reference to read the style from the referenced cell. This approach is useful if you want to dynamically determine the style, because then the formula can be in the referenced cell instead needing to construct the tag using a formula. For more information, see Referencing cells in content tag parameters. |
Within the date picker control, the selected values are displayed as follows, depending on the selection type. The exact format depends on your system locale.
- Date: Dates are displayed in an Excel "short date" format, such as 1/1/2019.
- Month: Months are displayed in month/year format, such as January 2019.
- Year: Years are displayed as the year number, such as 2019.
However, in all cases, the selected value is returned to the source spreadsheet as an Excel date/time serial number. If you want to use just the selected month or the year in your calculations, you may need to use functions such as MONTH or YEAR to extract the information from the full date.
If you want to set a default value for the date picker (or set minimum and maximum dates to restrict the valid selections), then your value must be resolvable as an Excel date/time value. For example, if you want to set a default value when using the Year selection type, you cannot simply enter the number 2019. Instead, you must enter a date such as 1/1/2019. The date picker control will resolve this date value as the year 2019. If you enter just the number, then the date picker will not interpret that value as a date.
Behavior notes
-
If you are using form state or a shared variable instead of a target cell, then the default value can be set by entering a date into the default value parameter of the GetFormState function or the GetSharedVariable function. These functions can be located anywhere in the sheet.
-
It is assumed that the target cell is off to one side (not visible in the formatted grid), within a work column. If you are saving the user's input to the database, the column to save is the column containing the target cell (not the column containing the DatePicker tag).
Examples
[DatePicker; TargetCell=K; DatePickerType=Date]
This example displays a date picker using the minimum required parameters. The user can select a date, and that date will be written to column K within the current row (for example if the tag is in row 22, the target cell is K22).
[DatePicker; TargetCell=K; DatePickerType=Date; MinDate=1/1/2016; MaxDate=12/31/2017]
In this example, the MinDate and MaxDate parameters are used to restrict the dates that the user can select.
[DatePicker; TargetCell=K; DatePickerType=Month; MinDate=1/1/2016; MaxDate=12/31/2017; ColumnStyle=auto-width]
In this example, the user can select any month within the minimum and maximum dates. Additionally, the ColumnStyle parameter is being used to automatically set the width of the date picker (instead of filling the column width). This would be necessary if you want the control to auto-size but the control is in a column that is styled to fit width.
[DatePicker; TargetCell=K; DatePickerType=Month; MinDate=[M]; MaxDate=[N]; ColumnStyle=[O]]
This is the same as the previous example, except in this case bracketed cell references are used to read the min date, max date, and column style from the designated cells in the current row.
[DatePicker; FormState=StartDate; DatePickerType=Date; MinDate=[M]; MaxDate=[N]; ColumnStyle=[O]]
In this example, the selected date is being stored in form state memory rather than being placed in a target cell. When the Axiom form is used as a dialog, this date can be passed to the currently active spreadsheet file.
[DatePicker; SharedVariable=StartDate; DatePickerType=Date; MinDate=[M]; MaxDate=[N]; ColumnStyle=[O]]
In this example, the selected date is being stored in memory as a shared variable rather than being placed in a target cell. For example, you might do this so that the user can select a date in a child form (displayed using the Embedded Form component), and then that date can be referenced in the parent form as well as other child forms within the shared form instance.