Question

我有一个网格视图，里面有3列。我想在任何一个列中弹出bootstrap日历。我的设计如下。

网格视图模板

<asp:TemplateField HeaderText="Date">
<ItemTemplate>
<div class="input-group date" id="lblLastServiceDate1">
<asp:TextBox ID="tbxLastServiceDate" runat="server" CssClass="form-control"></asp:TextBox>
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
</div>
</ItemTemplate>
</asp:TemplateField>

javascrip功能：

    $(document).ready(function () {

        $('#lblLastServiceDate1').datetimepicker({
            format: 'YYYY-MM-DD'
        });



    });

</script>

我在页面中添加了所有引导程序文件。

它在第一行网格视图文本框中正常工作，但它不适用于网格视图中的第2行，第3行和连续行。

如果有人遇到同样的问题，请让我知道答案。在此先感谢...

Answer 1

像cssclass一样给它

  <asp:TextBox ID="TextBox4" placeholder="DD/MM/YYYY" CssClass="cal" runat="server"></asp:TextBox>

然后

<script type="text/javascript">
        $(function () {
            $(".cal").datepicker({
                changeMonth: true,
            changeYear: true,
            yearRange: "1990:2100",
            dateFormat: 'd-M-y'

        });
    });
        </script>

Links for Datepicker UI design

Boostrap日历在asp.net gridview中无法正常工作？

1 个答案: