How I use a textbox with jquery datepicker with icon

Question

I want use jquery datepicker in my asp.net application but it don't work

in my Project is a Folder (images) with Calender.ico

here my code in master.master:

 <script>

        $(function () {
            $("#txtVon").datepicker({
                showOn: 'button',
                buttonImage: '/images/Calender.ico', 
                buttonImageOnly: true,
                dateFormat: "mm-dd-yy"
            });
        });

       </script>

here my code in createuser.aspx

<asp:TextBox ID="txtVon" runat="server" ReadOnly="True" ></asp:TextBox>

How I make wrong? I don't see the icon

Answer 1

I think it's the ID of your textbox. You write txtVon , but ASP.NET renders something different. So client side the ID is more likely to be something like C001_txtVon .

So it's better to give your textbox a CssClass like cDatePicker and use that in your jQuery selector.

Or make your ID selector a bit more fuzzy, like $("input[id*='txtVon']").datepicker({});

And as a last note; you'd best use a .png file instead of .ico, because i don't think that .ico is supported correctly by all browsers.

http://en.wikipedia.org/wiki/Comparison_of_web_browsers#Image_format_support

Answer 2

If you want datepicker to be visible on icon click as well? Here is what I do:

<input id='invdate' name='invdate' type='text'/>
<span style='padding:5px'><img id='dpimage' alt="img" src='calendar2.gif'></span>

$(function() {
  $("#invdate").datepicker();
  $("#dpimage").click(function () {
    $("#invdate").datepicker("show")
  });
});

Demo

Answer 3

instead of this

'/images/Calender.ico

place a non.ico image ie like eg: calender.gif..something like that