Soup to nuts guide to adding jQuery UI’s datepicker to jEditable

Mika has done a fantastic job supplying the jQuery community with his excellent in-place editing add-in jEditable.

He has also graciously provided us with a page explaining how to add custom input types.

But for us jEditable noobs looking to add custom input types to our pages…there was nowhere to go to find out how to tie it all together…that’s what this post will hopefully do.

Since we almost always keep our javascript in a separate file, let’s start with the html…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script src="/scripts/demo.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

You’ll notice that we’ve added four javascript files…jQuery itself…jQuery UI (be sure and select the Datepicker widget when building your jQuery UI download)…the jEditable file and our custom demo file.

Now we’ll just add in some css files and a table…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <link href="/content/Site.css" rel="stylesheet" type="text/css" />
    <link href="/content/ui-lightness/jquery-ui-1.8.1.custom.css" rel="stylesheet" />
    <script src="/scripts/jquery-1.4.2.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
    <script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
    <script src="/scripts/demo.js" type="text/javascript"></script>
</head>
<body>
	<div align="center">
		<table class="checkbookChecksTable centerMyTable">
		    <thead></thead>
		    <tbody>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID1</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-27</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-20
		            </td>
		            <td style="width: 90px;">
		                An Account Code1
		            </td>
		            <td style="width: 90px;">
		                An Account Code1 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 1
		            </td>
		            <td style="width: 70px;">
		                ($114.56)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID2</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-01</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-01
		            </td>
		            <td style="width: 90px;">
		                An Account Code2
		            </td>
		            <td style="width: 90px;">
		                An Account Code 2 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 2
		            </td>
		            <td style="width: 70px;">
		                ($55.67)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID2</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="">2010-01-01</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-01
		            </td>
		            <td style="width: 90px;">
		                An Account Code3
		            </td>
		            <td style="width: 90px;">
		                An Account Code 3 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 3
		            </td>
		            <td style="width: 70px;">
		                $1,252.90
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>
		    </tbody>
		    <tfoot></tfoot>
		</table>
  </div>
</body>
</html>

OK, so now our page looks like this…just a simple table for illustration purposes…

A simple table

Let’s build our demo.js file now…

$(document).ready(function() {
	    $('.editabledatepicker').editable(function(value, settings) {
	        return (value);
	    }, {
	        type: 'datepicker',
	        onblur: 'submit',
	        tooltip: "Click to edit...."
	    });
});

See the selector referencing the class editabledatepicker…that’s just normal jEditable syntax right?…so let’s go ahead and add that class to the appropriate cells in our table…

Here’s what one of the rows looks like now with the editabledatepicker class added…

		        <tr>
		            <td style="width: 70px;">
		                <span class="">A Batch ID1</span>
		            </td>
		            <td style="width: 70px;">
		                <span class="editabledatepicker">2010-01-27</span>
		            </td>
		            <td style="width: 70px;">
		                2010-01-20
		            </td>
		            <td style="width: 90px;">
		                An Account Code1
		            </td>
		            <td style="width: 90px;">
		                An Account Code1 Description
		            </td>
		            <td style="width: 90px;">
		                A Vendor 1
		            </td>
		            <td style="width: 70px;">
		                ($114.56)
		            </td>
		            <td style="width: 50px;">
		                <input type="button" class="checkbookButton" value="Save">
		            </td>
		        </tr>

Here’s where the real magic comes into play…notice in our first run at our javascript file, we specified a type when setting up our editabledatepicker

type: 'datepicker',

so now we have to let jEditable know about our datepicker type with this little bit of javascript…

	    jQuery.editable.addInputType('datepicker', {
	        element: function(settings, original) {

	            var input = jQuery('<input size=8 />');

	            // Catch the blur event on month change
	            settings.onblur = function(e) {
	            };

	            input.datepicker({
	                dateFormat: 'yy-mm-dd',
	                onSelect: function(dateText, inst) {
                            // you may want to remove this or 
                            // change it to 
                            // jQuery(this).submit(); 
                            // see GamB's comments below
	                    jQuery(this).parents("form").submit();
	                },
	                onClose: function(dateText, inst) {
                            // you may want to change this to 
                            // jQuery(this).submit(); 
                            // see GamB's comments below
	                    jQuery(this).parents("form").submit();
	                }
	            });

	            input.datepicker('option', 'showAnim', 'slide');

	            jQuery(this).append(input);
	            return (input);
	        }
	    });

…see the addInputType?

That’s how we add a custom input type to jEditable!

Now our js file looks like this…

    $(document).ready(function() {
	    jQuery.editable.addInputType('datepicker', {
	        element: function(settings, original) {

	            var input = jQuery('<input size=8 />');

	            // Catch the blur event on month change
	            settings.onblur = function(e) {
	            };

	            input.datepicker({
	                dateFormat: 'yy-mm-dd',
	                onSelect: function(dateText, inst) {
	                    jQuery(this).parents("form").submit();
	                },
	                onClose: function(dateText, inst) {
	                    jQuery(this).parents("form").submit();
	                }

	            });

	            input.datepicker('option', 'showAnim', 'slide');

	            jQuery(this).append(input);
	            return (input);
	        }
	    });

	    $('.editabledatepicker').editable(function(value, settings) {
	        return (value);
	    }, {
	        type: 'datepicker',
	        onblur: 'submit',
	        tooltip: "Click to edit...."
	    });
    });

and…when we click in the date cell…we’ll see this…

the calendar

When we choose a date, it’s written back to the table cell…works just as we’d expect!

Advertisements

About w4ik

software engineer...in the trenches
This entry was posted in jEditable, jQuery. Bookmark the permalink.

16 Responses to Soup to nuts guide to adding jQuery UI’s datepicker to jEditable

  1. Gonzales says:

    could you please explain to me how to get the jeditable example to wrok with mysql !!
    just i need to understand what i’m messing, if there’s a tutorial for that, could you please point me to it…
    thank you

  2. w4ik says:

    @Gonzales…If you’re building a table, or even some other way to display your data from MySQL, and it’ s showing on the page…make sure to

    1) add the following line in the head section of your page

    <script src="/scripts/jquery.jeditable.js" type="text/javascript"></script>
    

    2) make sure you give the element you want to use as an input element a name or assign it a class

    class="editable" 

    3) make sure you have something like this either in your page in a script tag or in a separate javascript file

    $(document).ready(function() {
    	        $('.editable').editable(function(value, settings) {
    	            return (value);
    	        }, {
    	            type: 'text',
    	            onblur: 'submit',
    	            tooltip: "Click to edit...."
    	        });
    	});
    

    If you’ve taken all those steps and it still doesn’t work…see if you can post an example somewhere and I’ll take a look… you might also try posting your question on StackOverflow

  3. Matthieu says:

    Thank you very much !!! I already use a datepicker plugin for jeditable available on the jtub, but I had the onlblur problem !!! Thanks to you, this problem is now fixed, and it’s a great releaf !

  4. Olivier says:

    Thanks a lot for your work, I’m not a JS guru and I had troubles linking jEdit’s datePicker with jeditable, it helps a lot 🙂

  5. Todd says:

    Great guide, thanks!

    I’m trying (unsuccessfully, so far) to create a custom input type where when the user clicks they are presented with two text input fields. I can get it to display, but only the value of the first field is returned. Here’s the input type snippet:


    $.editable.addInputType('twofields', {
    element : function (setting, original) {
    var txt = $('Foo:');
    var input = $('Bar:');
    $(this).append(txt);
    $(this).append(input);
    return (input);
    },
    });
    $("#edit_twofields").editable(
    '/xyz/twofield', {
    type : 'twofields',
    onblur: 'ignore',
    }
    );

    Any ideas or pointers would be greatly appreciated….

    Thanks, TB

    • w4ik says:

      Todd…I think you might have to edit jquery.jeditable.js

      Try around line line 474…at least that’s where it is on my version…where Mika adds in the input element that appears when the user clicks on an editable element.

      After this line

       $.editable = { 

      There’s a section that looks like this

                  text: {
                      element: function(settings, original) {
                          var input = $('<input />');
                          if (settings.width != 'none') { input.width(settings.width); }
                          if (settings.height != 'none') { input.height(settings.height); }
                          /* https://bugzilla.mozilla.org/show_bug.cgi?id=236791 */
                          //input[0].setAttribute('autocomplete','off');
                          input.attr('autocomplete', 'off');
                          $(this).append(input);
                          /* GSM Added this to cause the input elements to be styled */
                          $(input).addClass(settings.inputclass);
                          return (input);
                      }
                  },
      

      You could try adding two input elements where Mika is adding a single input element…you might need to write an if statement that checks the settings.inputclass and then adds the extra input element

  6. arnaud says:

    Thank you very much for your post!

    It saved me hours of work …

  7. Dzenan says:

    Great article w4ik,

    Is is suppose to submit whole form?
    It is exactly what it those in my ASP.NET page.

    Best regards
    Gamb

    • w4ik says:

      Gamb…If you built a page like the above example…then there should not be a post event…since there is no form…make sure you’ve got this

      	            
      // Catch the blur event on month change
      settings.onblur = function(e) {
      };
      

      in the section where you let jEditable know about your datepicker type

      • Gamb says:

        Hi w4ik

        There are two problems with code you provided:
        1. Postback (caused by jQuery(this).parents(“form”).submit();). I am using ASP.NET
        2. Double POST to server (caused by OnClosed and OnSelect events)

        I have made example site.

        http://d21326882.u256.surftown.se

        Modified code works with IE6+, Firefox 3.6+, Chrome

        Best regards
        Gamb

  8. Michael says:

    Do you have a downloadable file of a working example?

  9. qertoip says:

    You may find jeditable-datepicker plugin useful: https://github.com/qertoip/jeditable-datepicker
    It brings jQuery UI Datepicker support for Jeditable, although implementation is different.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s