DateTime

TwebBlockDateTimeControl

Date

Datetime

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

/**
 * @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.
 */

Date

block.json

"testDatetime": {
	"type": "string",
	"default": "2025-12-30"
},

Datetime

block.json

"testDatetime": {
	"type": "string",
	"default": "2025-12-30 23:45"
},

index.js

import {
	TwebBlockDateTimeControl,
} from '@tigriweb/components/attributes';

Date

index.js | edit()

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

Datetime

index.js | edit()

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