---
title: "Insert Date/Time plugin"
description: "Insert the current date and/or time into TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/insertdatetime/"
md_url: "https://www.tiny.cloud/docs/tinymce/6/insertdatetime/index.md"
version: "6"
last_updated: "2022-11-30T01:26:11Z"
tokens: 1362
---
Important This page documents TinyMCE 6. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/insertdatetime/).
# Insert Date/Time plugin

The `insertdatetime` plugin provides a toolbar control and menu item `Insert date/time` (under the `Insert` menu) that lets a user easily insert the current date and/or time into the editable area at the cursor insertion point.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  toolbar: 'insertdatetime'
});
```

## Options

These settings affect the execution of the `insertdatetime` plugin. Formats for both dates and times can be set in these configuration options.

### `insertdatetime_dateformat`

This option allows you to override the default formatting rule for date formats inserted by the `mceInsertDate` command. This defaults to `%Y-%m-%d` and where the different `%` variables get replaced with various [date format options](#referencedatetimeformats).

**Type:** `String`

**Default value:** `'%Y-%m-%d'`

#### Example: using `insertdatetime_dateformat`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  toolbar: 'insertdatetime',
  insertdatetime_dateformat: '%d-%m-%Y'
});
```

### `insertdatetime_formats`

Allows you to specify a list of date/time formats to be used in the date menu or date select box. A complete list of formats is available under [date formats](#referencedatetimeformats) below.

**Type:** `Array`

**Default value:** `[ '%H:%M:%S', '%Y-%m-%d', '%I:%M:%S %p', '%D' ]`

#### Example: using `insertdatetime_formats`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  toolbar: 'insertdatetime',
  insertdatetime_formats: [ '%H:%M:%S', '%Y-%m-%d', '%I:%M:%S %p', '%D' ]
});
```

### `insertdatetime_timeformat`

This option allows you to override the default formatting rule for times inserted by the `mceInsertTime` command. This defaults to `%H:%M:%S` and where the different `%` variables get replaced with various [date format options](#referencedatetimeformats).

**Type:** `String`

**Default value:** `'%H:%M:%S'`

#### Example: using `insertdatetime_timeformat`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  toolbar: 'insertdatetime',
  insertdatetime_timeformat: '%H:%M:%S'
});
```

### `insertdatetime_element`

When this option is enabled HTML5 time elements gets generated when you insert dates/times.

**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `insertdatetime_element`

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  toolbar: 'insertdatetime',
  insertdatetime_element: true
});
```

### Reference Date/Time formats

| Name | Summary |
| --- | --- |
| %D | mm/dd/yy (same as %m/%d/%y) |
| %r | 12-hour clock time hh:mm:ss with AM or PM (same as %I:%M:%S %p) |
| %y | year as a decimal number without a century (range 00 to 99) |
| %Y | year as a decimal number including the century |
| %m | month as a decimal number (range 01 to 12) |
| %B | full localized month name (e.g. "January") |
| %b | abbreviated localized month name (e.g. "Jan") |
| %d | day of the month as a decimal number (range 01 to 31) |
| %A | full localized weekday name (e.g. "Monday") |
| %a | abbreviated localized weekday name (e.g. "Mon") |
| %H | hour as a decimal number using a 24-hour clock (range 00 to 23) |
| %I | hour as a decimal number using a 12-hour clock (range 01 to 12) |
| %M | minute as a decimal number (range 00-59) |
| %S | second as a decimal number (range 00-59) |
| %p | either "am" or "pm" according to the given time value |
| %% | a literal "%" character |

## Toolbar buttons

The Insert Date/Time plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `insertdatetime` | Inserts the current date/time. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Insert Date/Time plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `insertdatetime` | Insert | Inserts the current date/time into the editor. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Insert Date/Time plugin provides the following TinyMCE commands.

| Command | Description |
| --- | --- |
| mceInsertDate | Inserts the current date as a human readable string. |
| mceInsertTime | Inserts the current time as a human readable string. |

Examples
```js
tinymce.activeEditor.execCommand('mceInsertDate');
tinymce.activeEditor.execCommand('mceInsertTime');
```