Sprite as jQuery UI datepicker icon

Answer on SO.

by Joel Kirchartz

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<a href="http://stackoverflow.com/questions/2320471/how-can-i-use-a-sprite-for-my-jquery-datepicker-icon/9812459#9812459">How can I use a sprite for my jQuery datepicker icon?</a>
<br/>
<label for="startdate">Start Date</label>
<input value="02-22-2012" id="startdate" class="date-picker" type="text"><span class="icon"></span>

CSS

.icon {
    display:inline-block;
    width:20px;
    height:20px;
    background:#00f;
    vertical-align:bottom;
}

JavaScript

$("#startdate").datepicker();
    
    $(".icon").click(function(){
        $(".date-picker").focus();        
    });