Grocery Crud time picker setup code in php codeigniter

Here's my translation and update of the French web page above (all the code was appearing as HTML entities, so it's far from a cut-and-paste exercise):

Before you start making changes to the library, you must first make sure you have a version of Grocery Crud containing the jQuery library with the TimePicker. If it does not, you must either update Grocery Crud or manually add the library in the installation directory of the library.

The first thing is to set up the file jquery-ui-timepicker-addon.config.js in the config directory of your installation of Grocery Crud (usually: / assets / grocery_crud / js / jquery_plugins / config). Several options are available to configure the TimePicker. To explore them, we advise you to refer to the official documentation.

Here is an example of the setup I am using:

$(function(){
    $('.datetime-input').datetimepicker({
     timeFormat: 'hh:mm:ss',
 dateFormat: js_date_format,
 showButtonPanel: true,
 changeMonth: true,
 changeYear: true
    });
    
 $('.datetime-input-clear').button();
 
 $('.datetime-input-clear').click(function(){
  $(this).parent().find('.datetime-input').val("");
  return false;
 }); 
 
 $('.time-input').timepicker({
  stepMinute: 5,
  timeFormat: 'HH:mm',
  hourMin: 0,
  hourMax: 23,
  addSliderAccess: true,
  sliderAccessArgs: { touchonly: false }
 });
 
 $('.time-input-clear').button();
 
 $('.time-input-clear').click(function(){
  $(this).parent().find('.time-input').val("");
  return false;
 });
 
});

Now, proceed to the modification of the core GC library code. Open the library file Grocery_CRUD.php in the directory of your installation (Usually in: / application / libraries / ). Edit the file and locate the function get_field_input() (around line 225 in the latest version of GC). Then add the following line inside the definition of variable $types_array :

'time',

Then search for the definition of function change_list_value() (around line 255 in the latest version of the file) and in the main function loop, add the following lines of code:

case 'time':
 if(!empty($value) && $value != '00:00:00') {
  list($hours,$minutes) = explode(":",substr($value,0));
  $value = $hours.':'.$minutes;
 } else {
  $value = '';
 }
break;

The next thing to do is to add a new function later on in Grocery_CRUD.php. Search for the function get_datetime_input() (around line 2222 of the latest version of the file) and add the following function definition nearby:

protected function get_time_input($field_info,$value) {
 $this->set_css($this->default_css_path.'/ui/simple/'.grocery_CRUD::JQUERY_UI_CSS);
 $this->set_css($this->default_css_path.'/jquery_plugins/jquery.ui.datetime.css');
 $this->set_css($this->default_css_path.'/jquery_plugins/jquery-ui-timepicker-addon.css');
 $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/ui/'.grocery_CRUD::JQUERY_UI_JS);
 $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/jquery-ui-timepicker-addon.js');
  
 if($this->language !== 'english') {
  include($this->default_config_path.'/language_alias.php');
   
  if(array_key_exists($this->language, $language_alias)) {
   $i18n_date_js_file = $this->default_javascript_path.'/jquery_plugins/ui/i18n/datepicker/jquery.ui.datepicker-'.$language_alias[$this->language].'.js';
    
   if(file_exists($i18n_date_js_file)) {
    $this->set_js_lib($i18n_date_js_file);
   }
    
   $i18n_datetime_js_file = $this->default_javascript_path.'/jquery_plugins/ui/i18n/timepicker/jquery-ui-timepicker-'.$language_alias[$this->language].'.js';
    
   if(file_exists($i18n_datetime_js_file)){
    $this->set_js_lib($i18n_datetime_js_file);
   }
    
  }
   
 }
  
 $this->set_js_config($this->default_javascript_path.'/jquery_plugins/config/jquery-ui-timepicker-addon.config.js');
  
 if(!empty($value) && $value != '00:00:00') {
  list($hours,$minutes) = explode(":",substr($value,0,6));
  $datetime = $hours.':'.$minutes;
 } else {
  $datetime = '';
 }
  
 $input = "<input id='field-{$field_info->name}' name='{$field_info->name}' type='text' value='$datetime' maxlength='5' class='time-input' /> <a class='time-input-clear' tabindex='-1'>".$this->l('form_button_clear')."</a> (hh:mm)";
 return $input;
}

And that's it, now you just need to set the field type in your controller code where necessary:

$crud->field_type('field_name','time');