PHP & MySQL, Javascript, Demos, Tutorials

Mixing Jeditable with a Calendar

For a recent project I needed to be able to edit text directly on the webpage I decided to use jeditable its very easy to implement and served my needs, but I also needed to add a Jquery UI calendar to the input once generated.

I tried a lot of different ways none of which worked until I came across a githup project called jeditable-datepicker

The default example works well:

$( document ).ready( function() {

  var date = $( '.editable' );

    function( value, settings ) {
      date.html( value );
      type: 'datepicker'

} );

It how ever does not demonstrate how to save the changes, with a little change saving the changes is easily done.

$(function() {

    var date = $('.editable');

    $('.editable').editable('save.php', {
         indicator : 'Saving...',
         tooltip   : 'Click to edit...',
         type: 'datepicker'


The changes are sent to save.php via a post. Inside the save file you collect the data then ideally save it, for this example I'm only formatting the data and showing the result back.

$value = $_POST['value'];
$id    = $_POST['id'];

//format date
$value = date('jS M', strtotime($value));

//print the date
echo $value;

David Carr

David Carr

For the past 12 years, I’ve been developing applications for the web using mostly PHP. I do this for a living and love what I do as every day there is something new and exciting to learn.

In my spare time, the web development community is a big part of my life. Whether managing online programming groups and blogs or attending a conference, I find keeping involved helps me stay up to date. This is also my chance to give back to the community that helped me get started, a place I am proud to be apart of.

Besides programming I love spending time with friends and family and can often be found together going out catching the latest movie, staying in playing games on the sofa or planning a trip to someplace I’ve never been before.