Karthik mathesh
Karthik mathesh

Reputation: 223

How to Use Time Picker in Joomla Compoent

I Newly Develop Joomla Component. I want to know how to add Time Picker in My Joomla Component.

Upvotes: 0

Views: 847

Answers (2)

user6619631
user6619631

Reputation:

Displays a calendar control field:

calendar($value, $name, $id, $format= '%Y-%m-%d', $attribs=null)


$value=>The date value,$name=>The name of the text field,$id=>The id of the text field,$format=>'%Y-%m-%d'  The date format,$attribs=>null  Additional html attributes,$value=>The date value,$name=> The name of the text field,$id=>            The id of the text field,$format=>'%Y-%m-%d' The date format,$attribs=>null   Additional html attributes

Upvotes: 1

user6619631
user6619631

Reputation:

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

Upvotes: 1

Related Questions