Help needed getting date picker FieldFrame fieldtype to work in FF Matrix
Development and Programming
Okay. I got this working without a hack to Brandon’s extension. I tested it, it works for both FF and regular fields. It isn’t spectacularly elegant, but it does the job.
Metadaptive, thanks for your great code – i could NOT have done this from scratch!
All I did was add a random number via Javascript to the ID of every field as it’s displayed. This doesn’t affect FF’s ability to save (I tested), everything works as expected.
Just replace the display_field function with the following:
function display_field($field_name, $field_data, $field_settings)
{
$this->insert_js('
(function($){
$(document).ready( function(){
var qrand = Math.floor(Math.random()*10000);
qrand = qrand.toString();
var myid = $("#'.$field_name.'").attr("id");
$("#'.$field_name.'").attr("id",myid+qrand).datepicker({dateFormat: "yy-mm-dd"});
});
})(jQuery);
');
return $this->_display_field($field_name, $field_data);
}
Hi Adrienne,
Glad you got it working in the end… promise will do some follow up on my FT and try and put it a releaseable form soonish…
I just used Adrienne’s edit and it doesn’t seem to be working. Did you change anything else Adrienne?
you’ll need to also grab the datepicker CSS from http://jqueryui.com/themeroller - or you can roll your own of course
Got the style to work correctly (was using an older version of JQuery-UI). Still having problems with multiple rows though.
did you try using aguns hack to jquery.ff_matrix.js instead of adrienne’s rewrite of the display_field function?
I gave it a shot, but I’m getting a inst is undefined on jquery-ui.min.js (line 10)
can you post your entire FT code for me?
Sure thing! Thanks for your help…here’s the code:
<?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 */can’t see anything obviously awry there…
I’m afraid I haven’t got a huge amount of time today, but try the attached files - includes a version of jquery.ff_matrix and my FT files (inc js/css) though it assumes you’ve got FF installed and running.
The directory structure should be correct so that you can just dump it in your system folder and ba-da-bing…
also I know it’s obvious and that you probably already have done, but check that your using the latest version of everything: FF 1.3.4, jquery 1.3.2 & jqueryui 1.7.1
let me know how you get on and if your still having issues I’ll try and find some time to go through it properly.
I’ll give this a shot! Thanks for your help!
One more thing -> looks like the language file wasn’t included in that zip, would you mind adding that too?
UPDATE: Just made a blank language file and it worked properly. I’m still getting the ‘inst is undefined’ error though. I’m using Google’s JQuery includes:
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.jsStill wasn’t able to get this to work. No longer have the need though so it’s not urgent! Thanks for all of your help. Definitely a useful tool.
no worries though I am curious as to what’s going on….
Hi,
I’m using the Date Picker on a site and am having similar problems.
I’m using the field type for a ‘date from’ and a ‘date to’ field.
It works for the first row (both columns), but then when I ‘add row’, the first column ‘sometimes’ updates, but the second column always updates the date for the first column (on the same row).
Something’s amiss…
If there’s something you want me to test - please let me know.
Carl