How I can use JQuery Datepicker with a Icon and a Format in ASP.NET

问题

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?

回答1:

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>

回答2:

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.

回答3:

try

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

I think that links here and here helps

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/13623539/how-i-can-use-jquery-datepicker-with-a-icon-and-a-format-in-asp-net

标签

javascript

jquery

ASP.NET

jquery-ui-datepicker