---
title: "Date Time Picker"
description: "Add Date Time Picker control to your custom blocks for WordPress using the Lazy Blocks plugin."
url: "https://www.lazyblocks.com/docs/blocks-controls/date-time-picker/"
lastUpdated: 2026-09-09
source: "blocks-controls/date-time-picker.mdx"
---
# Date Time Picker

Date Time Picker control allows users to select date and/or time values. One setting decides whether the control shows a calendar, a clock, or both.

## Control Settings

The control has one setting, `date_time_picker`, a group of three buttons that defaults to `date_time`:

- **Date** (`date`) - a calendar
- **Date & Time** (`date_time`) - a calendar and a clock
- **Time** (`time`) - a clock

While the value is empty the control shows a button reading `Select Date`, `Select Date and Time` or `Select Time`. Once a value is set, the button prints it in the site's own date, time or date and time format. A **Reset** button appears under the picker and clears the value.

The control saves date in `YYYY-MM-DDTHH:ii:ss` format regardless of the display format.

## Usage Examples

### PHP

```php title="PHP" /$attributes['control_name']/
<?php
$date = $attributes['control_name'];

// Date + Time format
echo '<p>' . date_i18n( 'F j, Y H:i', strtotime( $date ) ) . '</p>';

// Date only format
echo '<p>' . date_i18n( 'F j, Y', strtotime( $date ) ) . '</p>';

// Time only format
echo '<p>' . date_i18n( 'H:i', strtotime( $date ) ) . '</p>';
```

### Handlebars

```hbs title="Handlebars" /control_name/
{{! Date + Time format }}
<p>
  {{date_i18n "F j, Y H:i" control_name}}
</p>

{{! Date only format }}
<p>
  {{date_i18n "F j, Y" control_name}}
</p>

{{! Time only format }}
<p>
  {{date_i18n "H:i" control_name}}
</p>
```

### Post Meta

```php title="Post Meta" /get_lzb_meta( 'control_meta_name' )/
<?php
$date = get_lzb_meta( 'control_meta_name' );

// Date + Time format
echo '<p>' . date_i18n( 'F j, Y H:i', strtotime( $date ) ) . '</p>';

// Date only format
echo '<p>' . date_i18n( 'F j, Y', strtotime( $date ) ) . '</p>';

// Time only format
echo '<p>' . date_i18n( 'H:i', strtotime( $date ) ) . '</p>';
```

## Common Format Patterns

| Format       | Output              | Description        |
| ------------ | ------------------- | ------------------ |
| `F j, Y H:i` | March 1, 2024 13:45 | Full date and time |
| `F j, Y`     | March 1, 2024       | Full date          |
| `m/d/Y`      | 03/01/2024          | Short date         |
| `H:i`        | 13:45               | 24-hour time       |
| `g:i a`      | 1:45 pm             | 12-hour time       |

Use WordPress `date_i18n()` function to ensure proper date localization in your output.

## Documentation Index
> Fetch the complete documentation index at: https://www.lazyblocks.com/llms.txt
> Fetch every page in a single file at: https://www.lazyblocks.com/llms-full.txt