jQuery UI: datepicker - How to add close Button (Image!) on the right top?

Question

I want to add a close button at the right top.

I don't want to use the close button at the bottom with the button panel.

How can I do that?

I want something like the "X":

Answer 1

You can insert the link in the markup and style it as you wish, attaching an onclick handler to it that will call .datepicker( "hide" ), a built-in method of datepicker:

$( "#datepicker" ).datepicker({
    beforeShow: function( input ) {
        setTimeout(function() {
            var headerPane = $( input )
            .datepicker( "widget" )
            .find( ".ui-datepicker-header" );

            $( "<button>", {
                text: "Close",
                click: function() {
                  $.datepicker.hide();
                }
            }).appendTo( headerPane );
        }, 1 );
    }
});

Also, to make space for the close button, you'll probably need to adjust these styles in order to move the 'next month' button over to the left and make space for 'close' button:

.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }

Note: I've taken the above JS code from this proof of concept and adjusted it accordingly. Hasn't tested it though.

Answer 2

I kept getting this error:

$.datepicker.hide() is not a function

via firebug using @dalbaeb's solution. It was right but I had to tweak it a bit to get it to close the datepicker.

This is how I tweaked it and it worked for me:

$( "#datepicker" ).datepicker({
beforeShow: function( input ) {
    setTimeout(function() {
        var headerPane = $( input )
        .datepicker( "widget" )
        .find( ".ui-datepicker-header" );
        $( "<button>", {
            text: "Close",
            click: function() {

             $('#ui-datepicker-div').hide();         

            }
        }).appendTo( headerPane );
    }, 1 );
}
});

I just replaced:

$.datepicker.hide();

With this:

 $('#ui-datepicker-div').hide(); 

...and it closes the datepicker now! Hope it helps!

Answer 3

I have done this by styling the Done button

First, enable the showButtonPanel option then change it's text:

$(".calendar").datepicker({
    showButtonPanel: true,
    closeText: '×'
});

Then hide the Today button and style the close button:

#ui-datepicker-div .ui-datepicker-current {
    display: none;
}
#ui-datepicker-div .ui-datepicker-close {
    position: absolute;
    top: 0;
    right: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    font-size: 26px;
    line-height: 1;
    padding: 3px 8px;
    color: #cc6a6a;
    font-weight: 600;
    opacity: 0.8;
}
#ui-datepicker-div .ui-datepicker-close:focus {
    outline: none;
}
#ui-datepicker-div .ui-datepicker-close:hover {
    opacity: 1;
}