[Aggelos Michalopoulos]

Is there an easy way to apply the existing jquery timepicker on the time sql type fields? I have version 1.3.3.

 

Also how can I reset the sort to default after sorting a column in flexgrid? Right now the only way I have found is to delete the cookie.

 

Thank you.

 

P.S. Really great work!

[davidoster]

Hello and welcome to the forum.

I am not sure but there isn't an easy way to do it.

I believe you need to check what type of field is displayed, amend its class and tell to the jquery to change the display of the elements of this class.

This is far from simple I believe.

 

I think when, on list page you press the button Clear (the filters) resets also the sorting.

[Aggelos Michalopoulos]

Hello and welcome to the forum.

I am not sure but there isn't an easy way to do it.

I believe you need to check what type of field is displayed, amend its class and tell to the jquery to change the display of the elements of this class.

This is far from simple I believe.

 

Thanks but I prefer to keep it as is!

 

I think when, on list page you press the button Clear (the filters) resets also the sorting.

 

 

That was my thought too but It actually doesn't do the job! It would be nice if it did.

[DrPaul]

You can find instructions here (in French):

 

http://www.agencelimeos.fr/ajouter-timepicker-dans-grocery-crud/

 

I've been able to get it working in GC1.4.1

[DrPaul]

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

[hurtz]

I tried this solution but it gives me this error "Fatal error: Call to undefined method grocery_CRUD::set_js_lib()" referring to this line of code:

 

           $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/ui/'.grocery_CRUD::JQUERY_UI_JS);

 

any help will be much appreciated

[jtanaka]

I tried this solution but it gives me this error "Fatal error: Call to undefined method grocery_CRUD::set_js_lib()" referring to this line of code:

 

           $this->set_js_lib($this->default_javascript_path.'/jquery_plugins/ui/'.grocery_CRUD::JQUERY_UI_JS);

 

any help will be much appreciated

 

DrPaul's solution works great for me!

 

Make sure you added right place(right class) the codes.

[manikanta5a3]

i don't have the config file in the folder u mentioned, there are several config files like jquery.datetimepicker.config, jquery.choosen.config, jquery.multiselect.config
which file to edit?