This plugin provides the ability to specify the picker's format. The picker's options can be set via then localization settings.

Use the boxes below to set a format string and the locale of the sample picker and click "Change" to update the options.

tempusDominus.extend(tempusDominus.plugins.customDateFormat);
//or
import customDateFormat from 'tempusDominus/plugins/customDateFormat'
tempusDominus.extend(customDateFormat);

//example picker
const datetimepicker1 = new tempusDominus.TempusDominus(document.getElementById('datetimepicker1'),
  localization: {
  locale: 'pt-BR',
  format: 'dd/MM/yyyy HH:mm',
});

    

Format Tokens

The custom date format plugin supports the following tokens. Given 2022-07-04T15:13:29.474Z

Token Description Result
yy 2 digit year 22
yyyy 4 digit year 2022
M 1-2 digit month, e.g. 1...12 7
MM 2 digit month 07
MMM Short Month Jul
MMMM Full Month July
d 1-2 digit day, e.g. 1...31 4
dd 2 digit day 04
ddd Short Weekday Mon
dddd Full Weekday Monday
H 1-2 digit hour (24 hour) 13
HH 2 digit hour (24 hour) 13
h 1-2 digit hour (12 hour) 1 (PM)
hh 2 digit hour (12 hour) 01 (PM)
m 1-2 digit minute, e.g. 0...59 29
mm 2 digit minute, e.g. 0...59 29
s 1-2 digit second, e.g. 0...59 47
ss 2 digit second, e.g. 0...59 47
T Meridiem PM
Plugins - Custom Date Formats 01/19/2022 07/22/2022 How to use custom date format plugin with Tempus Dominus. datepicker, javascript, open source, tempus dominus, eonasdan