In my custom component, I need to enter date and time.

Joomla's standard calendar-element supports a date picker - but no time picker.

Can anyone help me and point me to an alternative date and time picker?

  • Simply have a look around via Google to see what suits your needs and integrate it into your component. Personally I live the one provided by UIKit, however it will require the UIKit library which is a little heavy for a single date/time picker
    – Lodder
    Sep 24, 2014 at 17:28
  • For those who may be interested I finally used this one:eonasdan.github.io/bootstrap-datetimepicker Sep 25, 2014 at 17:48
  • @PieroMarsilio I know this is late, but there is now a core joomla way of doing this, please see my answer below.
    – Dom
    Dec 1, 2018 at 18:39
  • @PieroMarsilio I hope that you will progress this page toward a system-recognized resolution. If none of the answers are satisfactory to you, please update your question to clarify what needs attention. Otherwise, please award the best answer the big green tick and upvote all helpful/educational/correct answers as a thank you to the volunteers who offered their support. Dec 2, 2018 at 10:10

4 Answers 4


The only downside to @johanpw's solution is by using #datetimepicker2 that means this field type can only be used once. Good solution otherwise!

Instead try the following in your /modules/mod_yourmodule/fields/datetime.php

$id = str_replace('jform[','',str_replace(']','',$this->name));

return '<div id="datetimepicker'.$id.'" class="input-append date">'.
                 '<input name="'.$this->name.'" data-format="MM/dd/yyyy HH:mm:ss PP" value="'.$this->value.'" type="text" />'.
                 '<span class="add-on">'.
                   '<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>'.
                '<script type="text/javascript">'.
                  'jQuery(function() {'.
                      'language: "en",'.
                      'pick12HourFormat: true,'.
                      'format: "yyyy-MM-dd hh:mm:ss"'.

I've also added in 'format: "yyyy-MM-dd hh:mm:ss"' so you can use it properly within a component with a DateTime SQL field if you desire.

I also had issues where the input box would disappear after selecting a date, this could just be me but if anyone else experiences this try this to your admin css:

.input-append.date {
    display: inline-block!important;

You can create your own custom field types in Joomla. This example is for a module, but the same process works with components:

Create this file: /modules/mod_yourmodule/fields/datetime.php

// Check to ensure this file is included in Joomla!
defined('_JEXEC') or die('Restricted access');

// Add CSS and JS


class JFormFieldDateTime extends JFormField {

    protected $type = 'DateTime';

    public function getInput() {
            return '<div class="well">'.
                    '<div id="datetimepicker2" class="input-append">'.
                        '<input data-format="MM/dd/yyyy HH:mm:ss PP" type="text"></input>'.
                        '<span class="add-on">'.
                          '<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>'.
                    '<script type="text/javascript">'.
                      'jQuery(function() {'.
                          'language: "en",'.
                          'pick12HourFormat: true'.

Now you have a custom field type. To use it, place this in your .xml file:

<fields name="params">
   <fieldset name="basic" addfieldpath="/modules/mod_yourmodule/models/fields">
       <field name="title" type="DateTime" label="Select Date and Time" description=""   />

Joomla Custom Field type

(Based on http://tarruda.github.io/bootstrap-datetimepicker/)


As of Joomla 3.7, a time picker is included in the core. The docs for this are here, but the gist is as follows.

If you want to do this through an XML form definition, then use

<?xml version="1.0" encoding="utf-8"?>
            format="%Y-%m-%d %H:%M:%S"

Or if you want JHTML directly, then its

'%Y-%m-%d %H:%M',
[ 'showTime'=>'showTime' ]);

The key points in these two methods is the 'showtime' and format. Format must include some time elements %H, %M, %S, otherwise you'll get a time picker, but the picked time wont make it back to your server.


JHTML::_( 'behavior.modal' );

echo JHTML::calendar('2015-04-03','name','id','%d.%m.%Y %H:%I');

  • 3
    Maybe add some more information to your answer
    – Lodder
    Mar 4, 2015 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.