The DateTimePicker
widget lets users input a date, a time, or both a date and
a time.
Users can input text or use the picker to select dates and times. If users input an invalid date or time, the picker shows an error that prompts users to input the information correctly.
Chat apps receive and can process the value of user-entered dates and times during form input events. For details about working with form inputs, see Receive form data.
Example
The following image displays a card consisting of a DateTimePicker
widget:

DateTimePicker
widgets: one for selecting both date and time, one for just date, and one for just time.
Here's the card's JSON:
JSON
{
"cardsV2": [
{
"cardId": "exampleCard",
"card": {
"sections": [
{
"widgets": [
{
"textParagraph": {
"text": "A datetime picker widget with both date and time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "meeting",
"type": "DATE_AND_TIME",
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just date:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "Choose a date",
"type": "DATE_ONLY",
}
},
{
"textParagraph": {
"text": "A datetime picker widget with just time:"
}
},
{
"divider": {}
},
{
"dateTimePicker": {
"name": "date_time_picker_date_and_time",
"label": "Select a time",
"type": "TIME_ONLY",
}
},
]
}
]
}
}
]
}
JSON representation and fields
JSON representation |
---|
{ "name": string, "label": string, "type": enum ( |
Fields | |
---|---|
name
|
The name by which the
For details about working with form inputs, see Receive form data. |
label
|
The text that prompts users to input a date, a time, or a date and time. For example, if users are scheduling an appointment, use a label such as
|
type
|
Whether the widget supports inputting a date, a time, or the date and time. |
valueMsEpoch
|
The default value displayed in the widget, in milliseconds since Unix epoch time.
Specify the value based on the type of picker (
|
timezoneOffsetDate
|
The number representing the time zone offset from UTC, in minutes. If set, the
|
onChangeAction
|
Triggered when the user clicks
Save
or
Clear
from the
|
DateTimePickerType
Enums | |
---|---|
DATE_AND_TIME
|
Users input a date and time. |
DATE_ONLY
|
Users input a date. |
TIME_ONLY
|
Users input a time. |
Action
An action that describes the behavior when the form is submitted. For example, you can invoke an Apps Script script to handle the form. If the action is triggered, the form values are sent to the server.
JSON representation |
---|
{ "function": string, "parameters": [ { object ( |
Fields | |
---|---|
function
|
A custom function to invoke when the containing element is clicked or othrwise activated. For example usage, see Create interactive cards. |
parameters[]
|
List of action parameters. |
loadIndicator
|
Specifies the loading indicator that the action displays while making the call to the action. |
persistValues
|
Indicates whether form values persist after the action. The default value is
If
If
|
interaction
|
Optional. Required when opening a dialog. What to do in response to an interaction with a user, such as a user clicking a button in a card message.
If unspecified, the app responds by executing an
By specifying an
Supported by Chat apps, but not Google Workspace Add-ons. If specified for an add-on, the entire card is stripped and nothing is shown in the client. |
ActionParameter
List of string parameters to supply when the action method is invoked. For example, consider three snooze buttons: snooze now, snooze one day, or snooze next week. You might use
action method = snooze()
, passing the snooze type and snooze time in the list of string parameters.
To learn more, see
CommonEventObject
.
JSON representation |
---|
{ "key": string, "value": string } |
Fields | |
---|---|
key
|
The name of the parameter for the action script. |
value
|
The value of the parameter. |
LoadIndicator
Specifies the loading indicator that the action displays while making the call to the action.
Enums | |
---|---|
SPINNER
|
Displays a spinner to indicate that content is loading. |
NONE
|
Nothing is displayed. |
Interaction
Optional. Required when opening a dialog.
What to do in response to an interaction with a user, such as a user clicking a button in a card message.
If unspecified, the app responds by executing an
action
—like opening a link or running a function—as normal.
By specifying an
interaction
, the app can respond in special interactive ways. For example, by setting
interaction
to
OPEN_DIALOG
, the app can open a
dialog.
When specified, a loading indicator isn't shown.
Supported by Chat apps, but not Google Workspace Add-ons. If specified for an add-on, the entire card is stripped and nothing is shown in the client.
Enums | |
---|---|
INTERACTION_UNSPECIFIED
|
Default value. The
action
executes as normal.
|
OPEN_DIALOG
|
Opens a dialog, a windowed, card-based interface that Chat apps use to interact with users. Only supported by Chat apps in response to button-clicks on card messages. Not supported by Google Workspace Add-ons. If specified for an add-on, the entire card is stripped and nothing is shown in the client. |