Question

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?

Answer 1

I had the same problem. Searching inside the sourcecode of http://www.appelsiini.net/projects/jeditable/custom.html brought me to the solution.

There is a ‘jquery.jeditable.datepicker.js’. Putted this in my code an added a new function ‘datepicker’ (also in the source).

I don’t know how your script works but in my case the function additionally needs:

id : ‘elementid’,

name : ‘edit’

to store the data in the database.

hth 🙂

dabbeljuh