Monthpicker

Hi All,

In my project I had a task to implement a monthpicker to the CRUD.
For this follow these steps, and maybe It could be implement to the next version of the GR.

1; Open the libraries/grocery_crud.php
Find this section:

protected function get_field_input($field_info, $value = null)

And edit the types_array. Add a new element.

$types_array = array(
					'integer', 
					'text',
					'true_false',
					'string', 
					'date',
					'datetime',
					'enum',
					'set',
					'relation', 
					'relation_n_n',
					'upload_file',
					'hidden',
					'password', 
					'readonly',
					'dropdown',
					'multiselect',
					'monthpicker'
			);

2; Find the get_datetime_input function and after it add this code:

	protected function get_monthpicker_input($field_info,$value)
	{
		$this->set_css($this->default_css_path.'/ui/simple/'.grocery_CRUD::JQUERY_UI_CSS);
		$this->set_js($this->default_javascript_path.'/jquery_plugins/ui/'.grocery_CRUD::JQUERY_UI_JS);
		$this->set_js($this->default_javascript_path.'/jquery_plugins/jquery.ui.monthpicker.js');
				
		$this->set_js($this->default_javascript_path.'/jquery_plugins/config/jquery.monthpicker.config.js');
		
		if(!empty($value) && $value != '0000-00' && $value != '1970-01')
		{
			list($year,$month,$day) = explode('-',substr($value,0,7));
			$date = date($this->php_date_format, mktime(0,0,0,$month,$day,$year));
		}
		else 
		{
			$datetime = '';
		}
		$input = "<input id='field-{$field_info->name}' name='{$field_info->name}' type='text' value='$datetime' maxlength='19' class='monthpicker-input' /> 
		<a class='monthpicker-input-clear' tabindex='-1'>".$this->l('form_button_clear')."</a>";
		return $input;
	}

3; Then go to your javascript assets :

/assets/grocery_crud/js/jquery_plugins/

and add a new file called query.ui.monthpicker.js ( I can't upload a js so I post it at the end of this topic )

4; Then go to your javascript config folder :

/assets/grocery_crud/js/jquery_plugins/config/

and add a new file called jquery.monthpicker.config.js

$(function(){
	$('.monthpicker-input').monthpicker({
			showOn:     "focus",
			dateFormat: 'yy/mm',
			buttonImageOnly: true
	});
	
	$('.monthpicker-input-clear').button();
	
	$('.monthpicker-input-clear').click(function(){
		$(this).parent().find('.monthpicker-input').val("");
		return false;
	});
	
});

5; Edit the theme css you use. I'm using the flexigrid so I added a new line in it at the 345. line

div.form-div input.monthpicker-input
{
	width:150px !important;	
}

6; The the last step use it in your code:

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

All of the monthpicker files could be find here: https://github.com/thebrowser/jquery.ui.monthpicker Thx for the developer for that.

I hope you could use this modificaton. Have fun! :)

Wathfea

Amit Shah

davidoster