Insert Date/Time plugin

Insert the current date and/or time into TinyMCE.

+ toolbar button + menu item

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',
  menubar: 'insert',
  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.

Example: Using insertdatetime_dateformat

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

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.

Example: Using insertdatetime_formats

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  menubar: 'insert',
  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.

Example: Using insertdatetime_timeformat

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  menubar: 'insert',
  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

Possible Values: true, false

Example: Using insertdatetime_element

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'insertdatetime',
  menubar: 'insert',
  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 configuration option.
The quickbars_insert_toolbar configuration option.
Custom Context toolbars.

Menu items

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:

The menu configuration option.
The contextmenu configuration option.
Custom Menu toolbar buttons.

Commands

The Insert Date/Time plugin provides the following JavaScript 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');

Was this article helpful? Yes - No

Well, that's awkward . Would you mind opening an issue or helping us out?

Thanks for the feedback!

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.