Currently seeking new career opportunities in web development, particularly with Laravel, Hire Me

Mixing Jeditable with a Calendar

David Carr

Javascript Demos Tutorials PHP & MySQL

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;
Laravel Modules Your Logo Your Logo Your Logo

Become a sponsor

Help support the blog so that I can continue creating new content!


My Latest Book

Modular Laravel Book - Laravel: The Modular way

Learn how to build modular applications with Laravel Find out more

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Learn Laravel with Laracasts

Faster Laravel Hosting

© 2006 - 2024 DC Blog. All code MIT license. All rights reserved.