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

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.

Type: String

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

Example: using insertdatetime_dateformat

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 below.

Type: Array

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

Example: using insertdatetime_formats

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.

Type: String

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

Example: using insertdatetime_timeformat

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

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 Insert Date/Time plugin provides the following menu items:

Menu item identifier Default Menu Location Description

insertdatetime

Insert

Inserts the current date/time into the editor.

These menu items can be added to the editor using:

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
tinymce.activeEditor.execCommand('mceInsertDate');
tinymce.activeEditor.execCommand('mceInsertTime');