Demos | PHP & MySQL | Javascript | Tutorials

David Carr

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' );

  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() {

    //editable
    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.

<?php
$value = $_POST['value'];
$id    = $_POST['id'];

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

//print the date
echo $value;
?>
Domains are often purchased from multiple providers, keeping track of where a domain is and its DNS settings can be tricky. Domain Mapper solves this by listing all your domains in one place. View your DNS settings and receive reminders to renew your domains. Try it today.

Support my work by donating with PayPal.

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2009 - 2021 DC Blog. All code MIT license. All rights reserved.