Blogger Widgets
  • Sharing Photos using SignalR
  • TFS Extenstion - allows copy work items between projects
  • Displaying jquery progressbar with ajax call on a modal dialog
  • Managing windows services of a server via a website
  • Exploring technologies available to date. TechCipher is one place that any professional would like to visit, either to get an overview or to have better understanding.

Search This Blog

Thursday 2 December 2010

Adding custom buttons to jquery datepicker showButtonPanel

JQuery solves most the requirements of date with the datepicker. Ok now, to add some extra functionality for datepicker such as providing some custom buttons in the buttonpanel after enabling it via "showButtonPanel : true".

Here is a snippet of code that should do the trick:-

$("#datepicker2").datepicker({
 showButtonPanel: true,
      beforeShow: function( input ) {
 setTimeout(function() {
   var buttonPane = $( input )
     .datepicker( "widget" )
     .find( ".ui-datepicker-buttonpane" );

   var btn = $('');
   btn
    .unbind("click")
   .bind("click", function () {
    $.datepicker._clearDate( input );
  });

   btn.appendTo( buttonPane );

 }, 1 );
      }
});

with the html as

Date: 

should display the datepicker with clear option as:-



“From a programmer’s point of view, the user is a peripheral that types when you issue a read request.”
– P. Williams

8 comments:

  1. hi, the button desapear when the next, previous or year select is clicked, do you know how to correct that?... i'll hope you can help me, thank for your post

    ReplyDelete
  2. code that works

    function AddClearButton(input)
    {
    setTimeout(function()
    ..
    .bind("click", function () {
    if($(input).val() != "") {
    $.datepicker._clearDate( input );
    }
    });

    btn.appendTo( buttonPane );
    }, 1 );
    }

    $("#datepicker2").datepicker({
    showButtonPanel: true,
    beforeShow: function( input ) {
    AddClearButton(input);
    },
    onChangeMonthYear:function( year, month, inst ) {
    AddClearButton(inst.input);
    }
    });
    });

    ReplyDelete
  3. Saif, your code is good. Still have some issues. If you press the monthchange button rapidly, you would have two or three AddClearButton calls resulting in two three buttons. Below is my improvised code.

    function AddClearButton(input)
    {
    setTimeout(function(){
    var buttonPane = $( input )
    .datepicker( "widget" )
    .find( ".ui-datepicker-buttonpane" );

    var btn = $('<button id="customClearButton" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Any Date</button>');
    btn
    .unbind("click")
    .bind("click", function () {
    $('#calender').val('Any Date');
    });

    // Check if buttonPane has that button

    if(buttonPane.has('#customClearButton').length==0)
    btn.appendTo( buttonPane );
    }, 1 );
    }

    ReplyDelete
  4. This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to article very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
    DedicatedHosting4u.com

    ReplyDelete

Copyright © 2013 Template Doctor . Designed by Malith Madushanka - Cool Blogger Tutorials | Code by CBT | Images by by HQ Wallpapers