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:

Demo: https://demos.dcblog.dev/jeditabledemo

$( document ).ready( function() {

var date = $( '.editable' );

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

} );

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


<code class="language-javascript">$(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; ?> ```