我的主页头
<link href="/Other/Bootstrap/bootstrap.min3.3.6.css" rel="stylesheet" />
<link href="/Css/custom.css" rel="stylesheet" />
<link href="/Css/font-awesome.css" rel="stylesheet" />
<link href="/Css/responsive.css" rel="stylesheet" />
<link href="/Css/style.css" rel="stylesheet" />
<link href="/Css/styles.css" rel="stylesheet" />
<link href="/Css/plugins.css" rel="stylesheet" />
<script src="/JavaScript/jquery.min.js"></script>
<script src="/JavaScript/bootstrap.min.js"></script>
<link href="/Other/Bootstrap/footable.bootstrap.min.css" rel="stylesheet" />
<script src="/Other/Bootstrap/footable.js"></script>
<link href="/Css/Sweetalert.css" rel="stylesheet" />
<script src="/JavaScript/sweetalert.js"></script>
<script src="/JavaScript/SweetPopup.js"></script>
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
这是我的内容页面，我在Gridview上使用footable并使用asp控件动态添加行。在文本框中我使用了datepicker。
<div class="row">
<div class="page-title clearfix">
<span class="h3"><i class=" fa fa-map-marker"></i> <strong>Student Information </strong></span>
</div>
<section style="background: #ddd">
<div class="container">
<div class="row" style="min-height: 450px;">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel ID="pnl1" runat="server" Visible="false">
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group col-sm-12 margin-top-10">
<label class="heading-small">Student Form Number</label>
</div>
<div class="form-group col-sm-12">
<asp:GridView ID="Gridview1" runat="server" CssClass="table table-bordered" ShowFooter="true" AutoGenerateColumns="false" OnRowCreated="Gridview1_RowCreated">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="#" HeaderStyle-Width="40px" />
<asp:TemplateField HeaderText="Student Type" ControlStyle-CssClass="grid" HeaderStyle-Width="20%">
<ItemTemplate>
<span class="Name"></span>
<asp:DropDownList ID="ddlStype" runat="server" data-toggle="tooltip" title="स्टूडेंट टाइप का चयन करें" data-placement="bottom">
<asp:ListItem Text="Select" Value="-1" />
<asp:ListItem Text="Other" Value="Other" />
<asp:ListItem Text="XYZ Student" Value="XYZ Student" />
</asp:DropDownList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator8" runat="server" ValidationGroup="L" InitialValue="-1" ControlToValidate="ddlStype" ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText=" Form no" ControlStyle-CssClass="grid" HeaderStyle-Width="20%">
<ItemTemplate>
<asp:TextBox ID="txt_fno" runat="server" placeholder=" Form No" onkeypress="return numericOnly(this);" data-toggle="tooltip" title="छात्र का फॉर्म नंबर दर्ज करें" data-placement="bottom" MaxLength="8" AutoComplete="off"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
这里我使用datepicker.But不应用javascript。
<div class="input-group">
<span class="Name"></span>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span> <asp:TextBox ID="txt_date" runat="server" placeholder="dd-mm-yyyy" data-toggle="tooltip" title="चेक इन दिनांक दर्ज करें" data-placement="bottom" AutoComplete="off"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="txt_date" ForeColor="red" ValidationGroup="L" SetFocusOnError="true"></asp:RequiredFieldValidator>
</div>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remark" ControlStyle-CssClass="grid" HeaderStyle-Width="30%">
<ItemTemplate>
<asp:TextBox ID="txt_remark" runat="server" placeholder="Enter Remark" AutoComplete="off" data-toggle="tooltip" title="टिप्पणी दर्ज करें" data-placement="bottom"></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" runat="server" data-toggle="tooltip" title="नई लाइन जोड़ने के लिए यहां क्लिक करे" data-placement="bottom" CssClass="btn hvr-shutter-out-horizontal pull-right" Text="Add New Row" ValidationGroup="L" OnClick="ButtonAdd_Click" Style="padding: 8px 11px;" />
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click"><i class="fa fa-trash-o" style="color:#f00; font-size:20px;"></i></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="form-group col-sm-12">
<asp:Button ID="btn_submit" runat="server" data-toggle="tooltip" title="सबमिट करने के लिए यहां क्लिक करें" class="btn hvr-shutter-out-horizontal extra-btn-padding pull-right" ValidationGroup="L" Text="SUBMIT" OnClick="btn_submit_Click"></asp:Button>
</div>
</div>
</div>
</asp:Panel>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</section>
</div>
<link href="/JavaScript/DatePicker/jquery-ui.css" rel="stylesheet" />
<link href="/JavaScript/DatePicker/datepicker3.css" rel="stylesheet" />
<script src="/JavaScript/NumVal.js"></script>
<script src="/JavaScript/msg.js"></script>
<script src="/JavaScript/DatePicker/jquery-ui.js"></script>
<script src="/JavaScript/DatePicker/bootstrap-datepicker.js"></script>
<script src="/JavaScript/Tooltip.js"></script>
<script>
$(document).ready(function () {
$('.table').footable();
$('[data-toggle="tooltip"]').tooltip();
$(function () {
$(".myDate").datepicker({
format: "dd-mm-yyyy",
startDate: "01-01-1990",
startView: 2,
clearBtn: !0,
forceParse: !1,
calendarWeeks: !0,
autoclose: !0,
todayHighlight: !0
});
})(jQuery);
});
function pageLoad(sender, args) {
if (args.get_isPartialLoad()) {
$('.table').footable();
$('[data-toggle="tooltip"]').tooltip();
$(function () {
$(".myDate").datepicker({
format: "dd-mm-yyyy",
startDate: "01-01-1990",
startView: 2,
clearBtn: !0,
forceParse: !1,
calendarWeeks: !0,
autoclose: !0,
todayHighlight: !0
});
})(jQuery);
}
}
</script>