Date/time picker in component

Question

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?

Answer 1

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

Answer 2

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>

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

Answer 3

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.

Answer 4

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

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