Home

Hi, chào cả nhà!

Đang học môn WEB 2, ASP .NET C#, bài tập yêu cầu làm bảng đăng ký thông tin gồm họ tên, mật khẩu, ngày sinh…

Mọi thứ có vẻ đơn giản và phần lớn cũng được giáo viên hướng dẫn cả rồi. Chỉ duy có cái khoản ô ngày sinh làm chutiephat có vài vấ đề cần phải suy nghĩ:

  • Nếu dùng code HTML thuần thì sẽ phải có đến 31 cái <option> trong <select> ngày, copy paste ư?.
  • Nếu dùng code C# để phát sinh thì sẽ gặp phải hiện tượng nạp trang sau mỗi lần kiểm tra hoặc đổ dữ liệu.

Và quyết định cuối cùng là dùng JavaScript (JS). Học kỳ trước khi học WEB 1 thì không được thực hành JS nhiều, chủ yếu là dùng PHP thôi nên để làm được bài này cũng mất cả ngày trời >”!<.

Demo
Và nào,  Các bước như sau:

  • Chúng ta sẽ tạo 3 dropdownlist (hay trong win app gọi là combobox ý ^^), lần lượt tên là ddlNam, ddlThang, ddlNgay.
  • Dùng JS để đổ dữ liệu mặc định vào các ô tương ứng.
  • Bắt sự kiện thay đổi Năm và Tháng để đổ các giá trị phù hợp cho Ngày.

Bước 1: Tạo file HTML để chứa 3 control dropdownlist và khai báo đường dẫn đến tập tin chứa code JavaScript.

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Demo javascript</title>
<!–Khai báo đường dẫn tới tập tin chứa mã javascript  –>
<script src=”jsNgayThangNam.js”></script>
</head>
<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<label>Năm:
<select name=”ddlNam” id=”ddlNam” onchange=”loadDay()”>
</select>
</label>
<label>Tháng:
<select name=”ddlThang” id=”ddlThang” onchange=”loadDay()”>
</select>
</label>
<label>Ngày:
<select name=”ddlNgay” id=”ddlNgay”>
</select>
</label>
<br/>
<input type=”button” value=”Click” onclick=”loadYear(); loadMonth(); loadDay()”/>
</form>
</body>
</html>

Bước 2: Tạo file javaScript chứa code xử lý.

// JavaScript Document
//////////////////////////////
// http://chutiephat.vn.vc /////
////////////////////////////
// Khai bao 3 bien toan cuc, de co the dung trong cac ham con
Nam;
Thang;
Ngay;
// Do du lieu vao ddl Nam
function loadYear()
{
// Gan bien Nam thanh tag <select> co id ddlNam
Nam = document.getElementById(“ddlNam”);
// Reset lai kich thuoc cua ddlNam
// Tranh truong hop bi du lieu rac moi khi goi ham
Nam.length = 0;
// Khai bao bien cuc bo dung de chay vong for
var iNam = 0;
// Khai bao bien today kieu Date
var today = new Date();
// Cho vong for lap tu 1950 cho den nam hien hanh
for(iNam=1950; iNam<=today.getFullYear(); iNam++)
{
// Khai bao va gan bien optNam la kieu du lieu tag <option>
var optNam = document.createElement(“option”);
// Gan thuoc tinh cho tag <option> ten optNam
// Text: Du lieu hien thi tren ddl
optNam.text = iNam;
// Value: Gia tri cua du lieu tren
optNam.value = iNam;
// Them tag <option> ten optNam vao tag <select> ten Nam
Nam.options.add(optNam);
}
}
// Load Thang
function loadMonth()
{
Thang = document.getElementById(“ddlThang”);
Thang.length = 0;
var iThang=0;
for(iThang=1; iThang<=12; iThang++)
{
var optThang = document.createElement(“option”);
optThang.text= iThang;
optThang.value = iThang;
Thang.options.add(optThang);
}
}
// Load Ngay
function loadDay()
{
Ngay = document.getElementById(“ddlNgay”);
Ngay.length = 0;
// parseInt: chuyen kieu Thang.value tu String sang Int
var value = parseInt(Thang.value);
// Dat bien SoNgay de lam gia tri cuoi cho dong lap phat sinh ngay
var SoNgay = 0;
// Thuc hien cac dong lenh sau dua tren viec so sanh gia tri Thang
switch (value)
{
// Truong hop thang 2
case 2:
// Lay gia tri Nam dang duoc chon trong ddlNam
var gtNam = Nam.selectedIndex;
// Thuat toan tinh nam nhuan
if((gtNam%4==0) && ((gtNam%100!=0)||(gtNam%400==0)))
{
// La nam nhuan
SoNgay = 28;
}
else
{
// Khong la nam nhuan
SoNgay = 29;
}
break;
// Truong hop cac thang 1, 3, 5, 7, 8, 10, 12
case 1: case 3: case 5: case 7: case 8: case 10: case 12:
SoNgay = 31;
break;
// Truong hop cac thang 4, 6, 9, 11
case 4: case 6: case 9: case 11:
SoNgay = 30;
break;
}
var iNgay=0;
// Cho vong lap chay tu 1 den SoNgay o tren
for(iNgay=1; iNgay<=SoNgay; iNgay++)
{
var optNgay = document.createElement(“option”);
optNgay.text = iNgay;
optNgay.value = iNgay;
Ngay.options.add(optNgay);
}
}

Thế là xong!
Chúc cả nhà học tốt. Nếu có câu hỏi gì, thì relay bên dưới, chutiephat sẽ trả lời sớm nhất ^^
Xin cám ơn.

10 thoughts on “JS-Đổ dữ liệu ngày tháng năm hợp lệ

  1. hix…………áp dụng zô vấn đề bài Validation của mình lun đi Bác……….Bác nói dài dòng quá………Một khi quá dài dòng……..thì sẽ “don’t understand” !!!

  2. Chú à!
    Mọi thứ đều có cái giá của nó chứ ?
    Tớ phải bỏ cả ngày để làm ra cái bài này, mất công post lên trên này nữa, thì chí ít chú cũng phải bỏ thời gian để đọc, làm thử và hiểu nó chứ? Rồi có gì hỏi thì hỏi tớ trả lời.
    Hay chú đưa bài đây tớ edit luôn cho :))

  3. them 1 cach tinh nam nhuan:

    bool KiemTraNgay( int DD, int MM, int YY)
    {
    int []arrThang = {0, 31, 28, 31, 30, 31, 30, 31, 31, 30, 31,30, 31};

    if( (YY % 4 == 0 && YY % 100 != 0) || (YY % 400 == 0))
    {
    arrThang[2] = 29;
    }
    if (MM 12)
    {
    return false;
    }
    if (arrThang[MM] < DD || DD < 1)
    {
    return false;
    }
    return true;
    }

  4. bạn ơi cho mình hỏi làm cho nó tự load ngay thang năm luôn mà không cần click vào button “Click” vậy.
    cảm ơn!

    • Khi nạp mới, trang sẽ tự động nạp các giá trị mặc định.
      Ở mỗi đều bắt sự kiện onchange=”loadDay()”.
      Nghĩa là mỗi khi chọn thay đổi một giá trị của ddlNam, ddlThang, hàm loadDay() sẽ được chạy, và khởi tạo lại giá trị của ddNgay phù hợp.

    • Chào bạn.
      Theo mình nghĩ, số ngày sẽ bị ảnh hưởng bởi năm và tháng, nên mình cho giá trị ngày phát sinh theo giá trị nhập vào của năm và tháng, để cho người dùng chọn, thế thì không phải kiểm tra giá trị nhập vào.
      Đây là cách làm đơn giản mà mình nghĩ được, bạn có cách nào khác thì cùng chia sẻ nhé.
      Thanks.

  5. Hàm kt năm nhuận không đúng bạn à. bạn sữa lại giúp mình được không mình đang cần gấp

  6. các anh chi ơi cách kiểm tra ngày tháng năm nhập vào có hợp lệ không trong javascript làm sao vậy. chỉ giúp em với.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s