I want to use jQuery for my Textbox. I want use the Datepicker with the format yyyy-mm-dd and with an Icon.

<script>
    $( "#txtVon" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true     
    });
</script>

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

How can I do this?

I want to use jQuery for my Textbox. I want use the Datepicker with the format yyyy-mm-dd and with an Icon.

<script>
    $( "#txtVon" ).datepicker({
        showOn: "button",
        buttonImage: "images/calendar.gif",
        buttonImageOnly: true     
    });
</script>

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

How can I do this?

• c#
• javascript
• jquery
• asp
• jquery-ui-datepicker

• You need to remember that unless you use Static Client ID's in your web config your txtVon box will have an ID similar to $contentSomething_txtVon, not just txtVon, so your JS won't run. – Ryan McDonough Commented Nov 29, 2012 at 14:24

5 Answers 5

When using ASP.NET WebForms you are best to use classes instead of IDs when referring to elements, because the rendered ID will be different:

<script>

            $(".txtVon").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true
            });


</script>
<asp:TextBox ID="txtVon" runat="server" class="txtVon"></asp:TextBox>

Try:

<script type="text/javascript">
  $(document).ready(function() {
    $("#txtVon.ClientID").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' });
  });
</script>

Don't forget to include js file.

try

$.datepicker.formatDate('yyyy-mm-dd', new Date(2012, 1 - 1, 26));

I think that links here and here helps

<script>

            $(".txtVon").datepicker({
            showOn: "button",
            buttonImage: "images/calendar.gif",
            buttonImageOnly: true,
            dateFormat: "yy-mm-dd"
            });


</script>
<asp:TextBox ID="txtVon" runat="server" class="txtVon"></asp:TextBox>

As suggested by @Curt use class name to bind datepicker. Also, make sure that your image is exists in the mentioned path. The date format you can use for your desire result is "yy-mm-dd"

Make sure the following files are available refereed.

jquery-1.5.1.min.js
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.datepicker.js
jquery-ui-1.8.14.custom.css

HTML code

<script>
$( "#txtVon" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    dateFormat: 'yyyy-mm-dd'
});
</script>
Date: <asp:TextBox ID="txtVon" runat="server" CssClass="txtVon" />