Insert Date/Time plugin
Insert the current date and/or time into TinyMCE.
Contribute to this pageThe 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.