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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$( 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$(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.
|
1 2 3 4 5 6 7 8 9 10 |
<?php $value = $_POST['value']; $id = $_POST['id']; //format date $value = date('jS M', strtotime($value)); //print the date echo $value; ?> |
To see this in action have a look at this Demo
About Author
David Carr | Website | Twitter
I'm a PHP Web Developer based in Hull it is my passion to develop clean, accessible and usable websites and applications, I'm an avid Twitter user why not Follow me? @daveismynamecom or join me on Google+