c# - How I can use JQuery Datepicker with a Icon and a Format in ASP.NET - Stack Overflow

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

Share Improve this question Follow edited Nov 29, 2012 at 10:26 Kos 72.4k2727 gold badges172172 silver badges239239 bronze badges asked Nov 29, 2012 at 10:20 TarasovTarasov 3,6931919 gold badges7272 silver badges128128 bronze badges 1

• 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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

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" />