I need to have a click to edit element on a page, that will in turn invoke an instance of the jQuery UI Datepicker.
Currently, I'm using JEditable to provide the in place editing, which is working fine. However, I have a date control input that I would like to have appear as a calendar, which is where the fun starts.
I've found a Comment in the this blog by Calle Kabo (the page is a little mashed unfortunately) that details a way to do this:
$.editable.addInputType("datepicker", {
element: function(settings, original) {
var input = $("<input type=\"text\" name=\"value\" />");
$(this).append(input);
return(input);
},
plugin: function(settings, original) {
var form = this;
$("input", this).filter(":text").datepicker({
onSelect: function(dateText) { $(this).hide(); $(form).trigger("submit"); }
});
}
});
However, I can't get the above to work - no errors, but no effect either. I've tried placing it within the jQuery document ready function and also outside of it - no joy.
My UI Datepicker class is date-picker and my Jeditable class is ajaxedit, I'm sure the above inaction is due to the need to reference them somehow in the code, but I don't know how. Also, the Jeditable control is one of many element ids, if that has a bearing.
Any ideas from those more in the know?
I took a look at the sourcecode mentioned above, but it seemed to be a bit buggy. I think it might have been designed for an older version of the datepicker, and not the jQuery UI datepicker. I made some modifications to the code, and with changes, it at least appears to be working in Firefox 3, Safari 4, Opera 9.5, and IE6+. Still might need some more testing in other browsers.
Here is the code I used (held in a file named jquery.jeditable.datepicker.js)
$.editable.addInputType('datepicker', {
element : function(settings, original) {
var input = $('<input>');
if (settings.width != 'none') { input.width(settings.width); }
if (settings.height != 'none') { input.height(settings.height); }
input.attr('autocomplete','off');
$(this).append(input);
return(input);
},
plugin : function(settings, original) {
/* Workaround for missing parentNode in IE */
var form = this;
settings.onblur = 'ignore';
$(this).find('input').datepicker().bind('click', function() {
$(this).datepicker('show');
return false;
}).bind('dateSelected', function(e, selectedDate, $td) {
$(form).submit();
});
}
});
Example Implementation Code:
$(".datepicker-initiative").editable('inc/ajax/saveInitiative.php', {
type: 'datepicker',
tooltip: 'Double-click to edit...',
event: 'dblclick',
submit: 'OK',
cancel: 'Cancel',
width: '100px'
});