Datepicker Using Bootstrap in ASP.Net
(Bootstrap DatePicker on Textbox in Asp.net) – Bootstrap là một framework bao gồm các HTML templates, CSS templates và Javascript tạo ra những cái tiện ích có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels.... Nhờ Bootstrap mà những người lập trình phát triển Website và phần mềm dễ dàng hơn, nhanh chóng hơn và chuyên nghiệp hơn.
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download thư viện bootstrap-datepicker tại đây
- B3: Tạo thư mục Js và Copy file bootstrap-datepicker.js vào thư mục này.
- B4: Copy file datepicker.css vào thư mục Styles
- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
- B1: Tạo Project trong Microsoft Visual Studio 2010
- B2: Download thư viện bootstrap-datepicker tại đây
- B3: Tạo thư mục Js và Copy file bootstrap-datepicker.js vào thư mục này.
- B4: Copy file datepicker.css vào thư mục Styles
- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head
<head id="Head1" runat="server">
<title>Datepicker Using Bootstrap in ASP.Net</title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="Js/bootstrap-datepicker.js" type="text/javascript"></script>
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="Styles/datepicker.css" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C# Code
<%@ Page
Title="Datepicker
Using Bootstrap in ASP.Net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DatepickerUsingBootstrap._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<!-- Default-->
<script type="text/javascript">
$(document).ready(function () {
var dp = $("#<%=txtDate.ClientID%>");
dp.datepicker({
format: "dd//mm//yyyy"
});
});
</script>
<!--Autoclose-->
<script type="text/javascript">
$(document).ready(function () {
var dp = $('#<%=txtAutoclose.ClientID%>');
dp.datepicker({
changeMonth: true,
changeYear: true,
format: "dd//mm//yyyy"
}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
});
</script>
<div class="panel
panel-default">
<div class="panel-heading">
<h3>Use Bootstrap DatePicker on Textbox Asp.net</h3>
</div>
<div class="panel-body">
<table cellpadding="2"
cellspacing="3"
width="100%">
<tr>
<td
style="width:15%;">
Default
</td>
<td>
<asp:TextBox ID="txtDate" CssClass="form-control" runat="server" Width="100px" ReadOnly="true"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Autoclose
</td>
<td>
<asp:TextBox ID="txtAutoclose"
CssClass="form-control"
runat="server"
Width="100px"
ReadOnly="true"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
VB.NET Code
<%@ Page
Title="Datepicker
Using Bootstrap in ASP.Net" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DatepickerUsingBootstrap._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"
runat="server">
</asp:ScriptManager>
<!-- Default-->
<script type="text/javascript">
$(document).ready(function () {
var dp = $("#<%=txtDate.ClientID%>");
dp.datepicker({
format: "dd//mm//yyyy"
});
});
</script>
<!--Autoclose-->
<script type="text/javascript">
$(document).ready(function () {
var dp = $('#<%=txtAutoclose.ClientID%>');
dp.datepicker({
changeMonth: true,
changeYear: true,
format: "dd//mm//yyyy"
}).on('changeDate', function (ev) {
$(this).blur();
$(this).datepicker('hide');
});
});
</script>
<div class="panel
panel-default">
<div class="panel-heading">
<h3>Use Bootstrap DatePicker on Textbox Asp.net</h3>
</div>
<div class="panel-body">
<table cellpadding="2"
cellspacing="3"
width="100%">
<tr>
<td
style="width:15%;">
Default
</td>
<td>
<asp:TextBox ID="txtDate" CssClass="form-control" runat="server" Width="100px" ReadOnly="true"></asp:TextBox>
</td>
</tr>
<tr>
<td>
Autoclose
</td>
<td>
<asp:TextBox ID="txtAutoclose"
CssClass="form-control"
runat="server"
Width="100px"
ReadOnly="true"></asp:TextBox>
</td>
</tr>
</table>
</div>
</div>
</asp:Content>
Sau khi hoàn thành các bước thực hiện trên là bạn đã có thể sử dụng Datepicker Using Bootstrap trong Asp.net rồi đó.
Chúc các bạn thành công!
Quang Bình
Share This:
No Comment to " Datepicker Using Bootstrap in ASP.Net "