Help needed getting date picker FieldFrame fieldtype to work in FF Matrix
Development and Programming
Hi all,
I’m trying to write a simple FF fieldtype that uses the datepicker built into jQuery UI to let the user select a date.
Using Ryan’s colour picker FT as very considerable starting point, I got it working pretty quickly in normal fields, but what I really want to be able to use it for is as an FF Matrix cell, which is where I’m stuck.
I’m pretty sure my problem is with the jQuery I’m using to target the current cell, as at the moment no matter which datepicker cell is clicked the date is returned into the datepicker cell in the first row of the matrix.
I’m sure this should be pretty simple to fix but I’m going nowhere.
Code is below, can anyone help me out?
Cheers in advance…
/* ===========================================================================
ext.td_date_picker.php ---------------------------
A Date Picker Custom Field Type for the ExpressionEngine control panel.
=============================================================================== */
if ( ! defined('EXT')) exit('Invalid file request');
class Td_date_picker extends Fieldframe_Fieldtype {
var $info = array(
'name' => 'TD Date Picker',
'version' => '0.2.2',
'desc' => 'Provides a date picker custom field',
'docs_url' => '',
'versions_xml_url' => ''
);
function _display_field($field_name, $field_data)
{
global $DSP;
$this->include_css('css/td_date_picker.css');
return $DSP->input_text($field_name, $field_data, '10', '10', 'date-pick', '100px', '', FALSE);
}
/**
* Display Field
*
* @param string $field_name The field's name
* @param mixed $field_data The field's current value
* @param array $field_settings The field's settings
* @return string The field's HTML
*/
function display_field($field_name, $field_data, $field_settings)
{
$this->insert_js('
(function($){
$(document).ready( function(){
$("#'.$field_name.'").datepicker({dateFormat: "yy-mm-dd"});
});
})(jQuery);
');
return $this->_display_field($field_name, $field_data);
}
/**
* Display Cell
*
* @param string $cell_name The cell's name
* @param mixed $cell_data The cell's current value
* @param array $cell_settings The cell's settings
* @return string The cell's HTML
*/
function display_cell($cell_name, $cell_data, $cell_settings)
{
$this->insert_js('
(function($){
$.fn.ffMatrix.onDisplayCell.td_date_picker = function(cell) {
$("input", cell).datepicker({dateFormat: "yy-mm-dd"});
};
})(jQuery);
');
return $this->_display_field($cell_name, $cell_data);
}
/* END class */
}
/* End of file ft.td_date_picker.php */
/* Location: ./system/extensions/fieldtypes/td_date_picker/ft.td_date_picker.php */so with a fresh brain on the problem is a little clearer - Fieldframe gives every cell the same id no matter what the row.
Either I need to increment the id value each time a row is added so I can do something like:
$("input").each(function(){
$(this).datepicker({dateFormat: "yy-mm-dd"});
});or hang the jquery call off a different selector
okay so scratch what I just said - Fieldframe assigns unique IDs on save (which makes sense I guess) while dynamically inserted elements just have unique name values, so I guess need to try looping through elements based on the value of name rather than ID…
hit a bit of a brick wall with this - can loop through name values with
$(function() {
$('input[name*="field_id_"].date-pick').datepicker();
});but the duplicate id values stuff everything up when trying to return the date into the correct field.
if I use just
$.fn.ffMatrix.onDisplayCell.td_date_picker = function(cell, FFM) {
$(".date-pick").datepicker({dateFormat: "yy-mm-dd"});
};then the datepicker works for saved rows (as they have unique id’s) but not for newly inserted rows…
Hi Tom,
Your last post is close. You need to target the cell, though. Instead of $(‘.date-pick’), use $(‘.date-pick’, cell).
Hey Brandon,
Thanks for the reply. I’ve made the change as you suggested but still find that the datepicker updates the first row of the matrix rather than the originating cell - most strange.
My full code for the FT is below in case you can spot anything obviously awry- zip attached with css/images if you want to have a look.
Cheers again for your time mate.
Tom
<?php
/* ===========================================================================
ext.td_date_picker.php ---------------------------
A Date Picker Custom Field Type for the ExpressionEngine control panel.
Requirements:
1) Brandon Kelly's FieldFrame extension
http://github.com/brandonkelly/bk.fieldframe.ee_addon/tree/master
2) jQuery + jQuery UI (for the Control Panel; extension comes bundled with ExpressionEngine)
INFO ---------------------------
Adapted by: Tom Davies, tomdavies.net from md_color_picker.php by Ryan Masuga, masugadesign.com
Created: 24 Jul 2009
Last Mod: 24 Jul 2009
=============================================================================== */
if ( ! defined('EXT')) exit('Invalid file request');
class Td_date_picker extends Fieldframe_Fieldtype {
var $info = array(
'name' => 'TD Date Picker',
'version' => '0.2.5',
'desc' => 'Provides a date picker custom field',
'docs_url' => '',
'versions_xml_url' => ''
);
function _display_field($field_name, $field_data)
{
global $DSP;
$this->include_css('css/td_date_picker.css');
return $DSP->input_text($field_name, $field_data, '10', '10', 'date-pick', '100px', '', FALSE);
}
/**
* Display Field
*
* @param string $field_name The field's name
* @param mixed $field_data The field's current value
* @param array $field_settings The field's settings
* @return string The field's HTML
*/
function display_field($field_name, $field_data, $field_settings)
{
$this->insert_js('
(function($){
$(document).ready( function(){
$("#'.$field_name.'").datepicker({dateFormat: "yy-mm-dd"});
});
})(jQuery);
');
return $this->_display_field($field_name, $field_data);
}
/**
* Display Cell
*
* @param string $cell_name The cell's name
* @param mixed $cell_data The cell's current value
* @param array $cell_settings The cell's settings
* @return string The cell's HTML
*/
function display_cell($cell_name, $cell_data, $cell_settings)
{
$this->insert_js('
(function($){
$.fn.ffMatrix.onDisplayCell.td_date_picker = function(cell, FFM) {
$(".date-pick, cell").datepicker({dateFormat: "yy-mm-dd"});
};
})(jQuery);
');
return $this->_display_field($cell_name, $cell_data);
}
/* END class */
}
/* End of file ft.td_date_picker.php */
/* Location: ./system/extensions/fieldtypes/td_date_picker/ft.td_date_picker.php */just tried it on a totally clean install of EE to be sure and still nothing doin’
I don’t have time to look through that, but take a look at MD Color Picker for a simple example of what you’re trying to do.
hey brandon, no worries - I understand you’ve got other things to do.
I used Ryan’s fieldtype as starting point for mine so have spend quite a bit of time going through it already - it’s just this last element that’s escaping me.
So just for giggles I tried using
$(".date-pick, cell").removeAttr("id").datepicker({dateFormat: "yy-mm-dd"});which as you’d expect causes the dynamically inserted cells to successfully trigger the datepicker which returns the date into the correct cell. However (also as you’d expect) this then breaks the datepicker for non-FFM datepicker cells as well as previously saved FFM cells.
Going to see if I can write some jQuery to test for duplicate ids and then remove/rename these while leaving the original unique ids in place.
If anyone has an idea as to the best way to do that or indeed a better approach then let me know…
Maybe I’m just being stupid but I can’t see an easy way to do this.
if the addRow function in jquery.ff_matrix.js just set a temporary/random or blank id attr instead of duplicating those of the first row in the table this wouldn’t be necessary (plus having duplicate ids isn’t valid html).
sure there’s probably a reason for giving those values though…
Hi guys,
I just had the same issue trying to get the datepicker jquery ui thingy to work with the FF Matrix (got it working fine stand-alone).
Firstly I should say that I ended up using the livequery jquery plugin to “automagically” add the datepicker function. Using this STILL caused the same issue with the duplicate ID’s.
So… I had to hack the “resetRows” function of the “jquery.ff_matrix.js”… am really sorry Brandon… I hate hacking such a beautiful extension!!
I replaced the function with the following. As you can see it is exactly the same, but it just adds a “rowindex” to the ID (in the same way as it does with the name). Thus giving us a unique ID each time.
function resetRows(obj) {
obj.dom.$table.find('tbody:first > tr:not(.head)').each(function(rowIndex) {
$(this).find('.td').each(function(cellType) {
$td = $(this);
if (rowIndex % 2) $td.removeClass('tableCellOne').addClass('tableCellTwo');
else $td.removeClass('tableCellTwo').addClass('tableCellOne');
$td.find('*[name]').each(function() {
this.name = obj.fieldName+'['+rowIndex+']' + this.name.substring(this.name.indexOf(']')+1);
});
// ADDED BY AGUN - START
$td.find('*[id]').each(function() {
this.id = obj.fieldName+rowIndex;
});
// ADDED BY AGUN - END
});
});
if ($.fn.ffMatrix.useTableDnD) {
obj.dom.$table.tableDnDUpdate();
}
}Hope that this helps someone.
Cheers.
Cheers Agun! That’s rather more elegant than the hack I ended up using so will prob use yours instead - I agree it’s unpleasant to have to use a hack at all though…
Brandon mate is there any chance of a fix for this in a later point version of FF?
No worries. Glad to be of help.