6

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 '14 at 17:28
  • For those who may be interested I finally used this one:eonasdan.github.io/bootstrap-datetimepicker – Piero Marsilio Sep 25 '14 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 '18 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. – mickmackusa Dec 2 '18 at 10:10
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>'.
                 '</span>'.
                '</div>'.
                '<script type="text/javascript">'.
                  'jQuery(function() {'.
                    'jQuery("#datetimepicker'.$id.'").datetimepicker({'.
                      'language: "en",'.
                      'pick12HourFormat: true,'.
                      'format: "yyyy-MM-dd hh:mm:ss"'.
                    '});'.
                  '});'.
                '</script>';

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;
}
3

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

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

// Add CSS and JS
JHtml::stylesheet('http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css');
JHtml::stylesheet('http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css');
JHtml::script('http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js');

jimport('joomla.form.formfield');

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>'.
                        '</span>'.
                      '</div>'.
                    '</div>'.
                    '<script type="text/javascript">'.
                      'jQuery(function() {'.
                        'jQuery("#datetimepicker2").datetimepicker({'.
                          'language: "en",'.
                          'pick12HourFormat: true'.
                        '});'.
                      '});'.
                    '</script>';
    }
}

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=""   />
   </fieldset>
</fields>

Joomla Custom Field type

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

1

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"?>
<form>
    <fieldset>
        <field
            name="mydatetimefield"
            type="calendar"
            label="COM_MYCOMPONENTNAME_FIELD_DATETIME"
            showtime="true"
            format="%Y-%m-%d %H:%M:%S"
        />
    />
/>

Or if you want JHTML directly, then its

JHtml::_(
'calendar',
'',
'mydatetimefield',
'mydatetimefieldid',
'%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.

0

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 '15 at 9:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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