(jQuery DatePicker in Asp.net) - jQuery là một Javascript Framework, một thư viện kiểu mới của Javascript hỗ trợ các nhà lập trình web tạo ra các tương tác động trên website. jQuery đơn giản hóa cách viết Javascript và tăng tốc độ xử lý các sự kiện trên trang web, giúp tiết kiệm thời gian và công sức rất nhiều so với việc ngồi viết javascript theo cách thông thường. Bài viết dưới đây sẽ hướng dẫn các bạn các sử dụng jQuery DatePicker trong Asp.net, với việc nhúng jQuery DatePicker vào các Textbox sẽ giúp người sử dụng chọn nhanh ngày tháng trong quá trình nhập liệu.
- B1: Nhúng các thư viện jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
Bạn có thể nhúng các thư viện này vào trang Master hoặc trang có sử dụng jQuery DatePicker.
- B2: Viết mã Javasript và tạo Control Textbox sử dụng DatePicker
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
});
});
</script>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true"></asp:TextBox>
- B3: Chạy Project và đặt chuột vào ô TextBox, hộp thoại ngày tháng xuất hiện và bây giờ ta chỉ cần chọn ngày tháng phù hợp.
Với jQuery DatePicker, nó cung cấp cho người lập trình nhiều lựa chọn. Và với mỗi yêu cầu thực tế người lập trình có thể áp dụng các lựa chọn để giải quyết bài toán, dưới đây là các lựa chọn.
1. Cho phép chọn tháng, năm
1. Cho phép chọn tháng, năm
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
dateFormat: "dd-mm-yy",
changeMonth: true,
changeYear: true
});
});
</script>
2. Cho phép thiết lập khoảng thời gian năm
<script type="text/javascript">
$(function() {
$("[id$=txtDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
yearRange: '1950:2025',
changeMonth: true,
changeYear: true
});
});
</script>
3. Không cho phép chọn thời gian lớn hơn (>) thời gian hiện tại
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
maxDate:0
});
});
</script>
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
maxDate: new Date('2015/05/26')
});
});
</script>
4. Không cho phép chọn thời gian nhỏ hơn (<) thời gian hiện tại
<script type="text/javascript">
$(function() {
$("[id$=txtDate_minDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
minDate:0
});
});
</script>
<script type="text/javascript">
$(function () {
$("[id$=txtDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
minDate: new Date('2015/05/26')
});
});
</script>
5. Thiết lập thời gian mặc định
<script type="text/javascript">
$(function() {
$("[id$=txtDate_DefaultDate]").datepicker({
dateFormat: "dd-mm-yy",
inline: true,
showAnim: 'fadeIn',
changeMonth: true,
changeYear: true,
defaultDate: -7
});
});
</script>
</script>
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment