Black Friday sale is now on! 50% off Laravel: The Modular Way. Learn more

Mixing Jeditable with a Calendar

David Carr

Demos PHP & MySQL Javascript Tutorials

    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

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

    Laravel Modules Book by David Carr

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

    Subscribe to my newsletter

    Subscribe and get my books and product announcements.

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