> For the complete documentation index, see [llms.txt](https://tigriweb.gitbook.io/components/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tigriweb.gitbook.io/components/meta/datetime.md).

# DateTime

[TwebMetaDateTimeControl](https://github.com/tigriweb/components/blob/master/meta/TwebMetaDateTimeControl.js)

{% tabs %}
{% tab title="Date" %}

<div align="left" data-full-width="false"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FW7514Ury45v5dMktWNRv%2Fdate.jpg?alt=media&amp;token=b6c8af97-d3f4-431a-a27f-7ab41b5f3583" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FceMOWSKzAVdy1vKdqZv9%2Fdate-popover.jpg?alt=media&amp;token=f02b80dc-f67b-4033-8bf9-0179f484c898" alt=""><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Datetime" %}

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FPsDyk7EWBeB0PVnKdrh7%2Fdatetime.jpg?alt=media&amp;token=0ce248e0-a58f-4cf7-b8e0-6547b741f5de" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="https://870798947-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWAokPCWM65E5XQJVixgi%2Fuploads%2FW9ygJOj0eiZWbpPUArpc%2Fdatetime-popover.jpg?alt=media&amp;token=9f649ef2-213d-46bc-89b9-a8f8d8ea856f" alt=""><figcaption></figcaption></figure></div>
{% endtab %}
{% endtabs %}

<details>

<summary>{ label, labelButtonText, help, name*, currentDate, is12Hour, dateOrder, isInvalidDate, onMonthPreviewed, events, startOfWeek, type, attributes*, setAttributes* }</summary>

```jsx
/**
 * @param {string} [label] - Component label.
 * @param {string} [labelButtonText] - Component button text if value is empty.
 * @param {string} [help] - Component description.
 * @param {string} name - Attribute name.
 * @param {string} [currentDate] - The current date and time at initialization. Optionally pass in a null value to specify no date is currently selected.
 * @param {boolean} [name] - Whether we use a 12-hour clock. With a 12-hour clock, an AM/PM widget is displayed and the time format is assumed to be MM-DD-YYYY (as opposed to the default format DD-MM-YYYY).
 * @param {string} [dateOrder] - The order of day, month, and year. This prop overrides the time format determined by is12Hour prop.
 * @param {boolean} [isInvalidDate] - A callback function which receives a Date object representing a day as an argument, and should return a Boolean to signify if the day is valid or not.
 * @param {string} [onMonthPreviewed] - A callback invoked when selecting the previous/next month in the date picker. The callback receives the new month date in the ISO format as an argument.
 * @param {string} [events] - List of events to show in the date picker. Each event will appear as a dot on the day of the event.
 * @param {number} [startOfWeek] - The day that the week should start on. 0 for Sunday, 1 for Monday, etc.
 * @param {string} [type] - `date` or `datetime` (default: datetime).
 * @param {object} attributes - Object containing block attributes.
 * @param {function} setAttributes - Function to set new block attribute values.
 */
```

</details>

{% tabs %}
{% tab title="Date" %}
{% code title="functions.php" overflow="wrap" %}

```php
register_post_meta( 'post_type_name', 'test_date', array(
	'type'         => 'string',
	'default'      => '2025-12-30',
	'single'       => true,
	'show_in_rest' => true,
) );
```

{% endcode %}
{% endtab %}

{% tab title="Datetime" %}
{% code title="functions.php" %}

```php
register_post_meta( 'post_type_name', 'test_datetime', array(
	'type'         => 'string',
	'default'      => '2025-12-30',
	'single'       => true,
	'show_in_rest' => true,
) );
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% code title="index.js" overflow="wrap" %}

```jsx
import {
	TwebMetaDateTimeControl,
} from '@tigriweb/components/meta';
```

{% endcode %}

{% tabs %}
{% tab title="Date" %}
{% code title="index.js | edit()" %}

```jsx
<TwebMetaDateTimeControl
	label={ __('Date Label', 'your-theme-name') }
	help={ __('Date Description', 'your-theme-name') }
	labelButtonText={ __('Select Date', 'your-theme-name') }
	type="date"
	name="test_date"
	{...{ attributes, setAttributes }}
/>
```

{% endcode %}
{% endtab %}

{% tab title="Datetime" %}
{% code title="index.js | edit()" %}

```jsx
<TwebMetaDateTimeControl
	label={ __('Datetime Label', 'your-theme-name') }
	help={ __('Datetime Description', 'your-theme-name') }
	labelButtonText={ __('Select Datetime', 'your-theme-name') }
	name="test_datetime"
	{...{ attributes, setAttributes }}
/>
```

{% endcode %}
{% endtab %}
{% endtabs %}