Show clear button in readonly input box on mousehover

Question

<input id="my-input" type="search" />

shows a 'x' to clear the input on mousehover.

This behaviour is lost when I do

<input id="my-input" type="search" readonly="readonly">

I've had to make my Datepicker input box readonly:

$("#my-input").datepicker({ dateFormat: 'yy-mm-dd' }).attr('readonly', 'true');

How can I retain the previous behaviour for this readonly input box?

Answer 1

<input id="my-input" type="search" />

with

$("#my-input").datepicker({ dateFormat: 'yy-mm-dd' }).keydown(function(e) {
    e.preventDefault();
    return false;
});

seems to achieve what I'm after.