如何在ASP.NET中使用带有图标和格式的JQuery Datepicker

时间:2012-11-29 10:20:44

标签: c# javascript jquery asp.net jquery-ui-datepicker

我想在我的Textbox中使用jQuery。我想使用格式为yyyy-mm-dd的Datepicker和一个Icon。

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

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

我该怎么做?

5 个答案:

答案 0 :(得分:2)

使用ASP.NET WebForms时,最好在引用元素时使用类而不是ID ,因为呈现的ID会有所不同:

<script>

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


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

答案 1 :(得分:2)

尝试:

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

不要忘记包含js文件。

答案 2 :(得分:2)

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

我认为链接herehere有助于

答案 3 :(得分:2)

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

正如@Curt所建议的那样,使用类名来绑定datepicker。此外,请确保您的图像存在于上述路径中。您可以用于所需结果的日期格式为"yy-mm-dd"

答案 4 :(得分:1)

确保以下文件可用。

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代码

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