# Text + Date picker

The message card building tool provides combination modules for common message push scenarios, allowing you to quickly build card content within the tool. This article will introduce the text + date picker combination.

## Module display

In the message card building tool, the text + date picker combination module is shown in the figure below. This combination module is generally used to display date interaction blocks containing instructions. Date pickers only support postback interactions. For example, set meeting times, vacation times, etc.

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/2bccaf18000625515e13baf27f32b40c_eqUJ2KPkad.png?height=1422&lazyload=true&maxWidth=600&width=2882)

## Edit component

The text + date picker combination module is essentially a content module (div). In the content module, the text component is set with the `text` parameter and the date picker component is set with the `extra` parameter. For detailed configuration instructions of the content module, see [Content module](https://open.feishu.cn/document/ukTMukTMukTM/uYzM3QjL2MzN04iNzcDN/component-list/common-components-and-elements#aeca2354).
The JSON sample configuration is as follows:

```json
// If you want to use this JSON example, please note that you need to manually clear the comments at the beginning of //
{
   "elements": [
     {
       "tag": "div", // content module
       "text": { // text component
         "tag": "lark_md",
         "content": "International authoritative security certification and information security management system provide enterprises with full life cycle security protection."
       },
       "extra": {
         "tag": "date_picker", // Date picker
         "placeholder": {
           "tag": "plain_text",
           "content": "Please select a date"
         },
         "initial_date": "2020-9-20"
       }
     }
   ]
}
```

### Text component

Select the text component of the combination module in the building tool, and set the text format and content in the **Edit Card** area.
Support for adjusting text component parameters contained in content modules in JSON configuration. For parameter description of the text component, please refer to [Text Component](https://open.feishu.cn/document/ukTMukTMukTM/uUzNwUjL1cDM14SN3ATN).

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/9798b2b889faa58100ae8797320373b5_qGh3jYxOMf.png?height=1028&lazyload=true&maxWidth=600&width=1658)

### Date picker

Select the folding button group of the combination module in the building tool, and set the configuration items of the folding button group in the **Edit Card** area.
Supports adjusting the date picker component parameters attached to the content module in the JSON configuration. In addition, the date picker is an interactive component and supports configuration of postback interaction. For detailed instructions, see [datePicker](https://open.feishu.cn/document/ukTMukTMukTM/uQzNwUjL0cDM14CN3ATN).

- **Selector mode** is divided into three types: **Date Selector**, **Time Selector**, **Date Time Selector**.
- **Default value**: Set the default time on the selector.
     - The value format of the date picker is `yyyy-MM-dd`.
     - The value format of the time selector is `HH:mm`.
     - The value format of the date and time selector is `yyyy-MM-dd HH:mm`.
- **Prompt copy**: Prompt text content in the selector input box.
- **Configure postback interaction**: Configure the name and value of the postback parameter. When the user selects the date and time, the application will send an HTTP POST request to the specified message card request address, and the request will include the configured postback. parameter data. For detailed configuration instructions on postback interaction, see [Configure card interaction](https://open.feishu.cn/document/ukTMukTMukTM/uYjNwUjL2YDM14iN2ATN).
- **Second confirmation pop-up window**: After opening, you need to configure the title and prompt information of the pop-up window. When the user selects the date and time, he needs to confirm twice in the pop-up window.

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/321ae99b7923b43a77ab2d8f75f18948_xpD2CmaYO0.png?height=1150&lazyload=true&maxWidth=600&width=1656)

## Card example

For example, in the message card of a vacation application, set the interactive content of the vacation time period.

![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/0c83ef07b9c99c1bb4a498e006e6b7c5_h2lpx4yQiv.png?height=420&lazyload=true&maxWidth=600&width=1202)

The JSON configuration of the card is as follows:

```json
// If you want to use this JSON example, please note that you need to manually clear the comments at the beginning of //
{
   "elements": [
     { // text + date picker
       "tag": "div",
       "text": {
         "tag": "lark_md",
         "content": "Select the start time of vacation"
       },
       "extra": {
         "tag": "picker_datetime",
         "placeholder": {
           "tag": "plain_text",
           "content": "Please select a date and time"
         },
         "initial_date": "2020-9-20"
       }
     },
     { // text + date picker
       "tag": "div",
       "text": {
         "tag": "lark_md",
         "content": "Select the end time of vacation"
       },
       "extra": {
         "tag": "picker_datetime",
         "placeholder": {
           "tag": "plain_text",
           "content": "Please select a date and time"
         },
         "initial_date": "2020-9-20"
       }
     },
     {
       "tag": "hr"
     },
     {
       "tag": "action",
       "actions": [
         {
           "tag": "button",
           "text": {
             "tag": "plain_text",
             "content": "submit"
           },
           "type": "primary",
           "multi_url": {
             "url": "https://open.feishu.cn/document",
             "android_url": "",
             "ios_url": "",
             "pc_url": ""
           }
         },
         {
           "tag": "button",
           "text": {
             "tag": "plain_text",
             "content": "Cancel"
           },
           "type": "default",
           "multi_url": {
             "url": "https://open.feishu.cn/document",
             "android_url": "",
             "ios_url": "",
             "pc_url": ""
           }
         }
       ]
     }
   ],
   "header": {
     "template": "orange",
     "title": {
       "content": "Vacation Application",
       "tag": "plain_text"
     }
   }
}
```