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;
?>