Nền tảng Kiến thức - Hành trang tới Tương lai | NenTang.vn

Chương 7-Bài 10. Tích hợp công cụ chọn Ngày Tháng Date Picker

Tác giả: Dương Nguyễn Phú Cường
Số phút học: 57 phút

Ngày đăng: 3/11/2025, 8:39

Lượt xem: 1774

Bộ công cụ chọn Ngày Tháng Date Picker

Để tiện dụng cho người dùng thông thường, chúng ta cần có một công cụ chọn Ngày Tháng để thống nhất định dạng, tránh người dùng nhập quá nhiều định dạng khác nhau. Ví dụ:

05-10-2020: ngày 05 tháng 10 năm 2020, cách nhau bởi dấu -
05/10/2020: ngày 05 tháng 10 năm 2020, cách nhau bởi dấu /
10-05-2020: tháng 10, ngày 05, năm 2020, cách nhau bởi dấu -
2020/05/10: năm 2020, tháng 05, ngày 10, cách nhau bởi dấu /
...

Ngoài ra, còn có các ngày nhập không hợp lệ. Vi dụ:

31/02/2020: ngày 31 tháng 02 năm 2020, ngày này không tồn tại trong lịch.

Để thống nhất định dạng ngày-tháng-năm, chúng ta cần một công cụ cho phép người dùng chọn ngày chính xác, và tránh sai sót về định dạng. Có rất nhiều hãng thiết kế các công cụ trực quan này. Nổi tiếng và thông dụng là thư viện `JQuery UI`

Tích hợp CKEDITOR vào trang web

Step 1: download thư viện JQUERY

Do thự viện CKEDITOR được viết dựa vào JQUERY, nên chúng ta cần liên kết thư viện JQUERY trước
Truy cập: https://jquery.com/download/
Download thư viện vào thư mục: vendor/jquery/jquery.min.js
Cấu trúc thư mục như sau:

thu-muc-goc-du-an
--- vendor
    --- jquery
        --- jquery.min.js

--- index.html

Step 2: download thư viện JQUERY UI

Truy cập: https://jqueryui.com/
Download phiên bản là 1.12.1
Download thư viện vào thư mục: vendor/jquery-ui
Cấu trúc thư mục như sau:

thu-muc-goc-du-an 
--- vendor 
    --- jquery 
        --- jquery.min.js 
    --- jquery-ui

--- index.html

Jquery UI có rất nhiều công cụ có thể sử dụng, chúng ta xem hướng dẫn làm công cụ Date Picker tại: https://jqueryui.com/datepicker/

Step 3: tạo file HTML đơn giản như sau

Tạo file index.html
Nội dung file:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Học JQuery | NenTang.vn</title>

  <!-- Liên kết CSS JQuery UI -->
  <link href="vendor/jquery-ui/jquery-ui.min.css" type="text/css" rel="stylesheet" />

  <style>
    body {
      height: 100vh;
      background-color: #89d4cf;
      background-image: linear-gradient(315deg, #89d4cf 0%, #6e45e1 74%);
    }

    .watermark {
      color: #fff;
      text-align: center;
    }

    #frmGhiDanh {
      width: 968px;
      margin: 0 auto;
    }

    #frmGhiDanh #thongtinDonGian {
      border: 1px solid red;
      background-color: #f1dfd1;
      background-image: linear-gradient(315deg, #f1dfd1 0%, #f6f0ea 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh #thongtinPhucTap {
      border: 1px solid red;
      background-color: #ebbe9b;
      background-image: linear-gradient(315deg, #ebbe9b 0%, #e7a977 74%);
    }

    #frmGhiDanh .tblThongTinCaNhan {
      border-collapse: collapse;
      width: 100%;
      border-color: red;
    }

    #frmGhiDanh .tblThongTinCaNhan td {
      padding: 5px;
    }

    #frmGhiDanh .tieude {
      font-weight: bold;
      text-align: right;
    }

    #frmGhiDanh #txtSoThichCaNhan {
      width: 90%;
    }

    #frmGhiDanh #btnGoiDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #27ae60;
      cursor: pointer;
    }

    #frmGhiDanh #btnXoaTrangDuLieu {
      padding: 10px;
      color: #fff;
      font-weight: bold;
      border: 1px solid #fff;
      background-color: #e74c3c;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <!-- Phần trình bày Giao diện HTML - START -->

  <h1 class="watermark">Nền tảng Kiến thức | https://nentang.vn</h1>


  <form name="frmGhiDanh" id="frmGhiDanh" method="post" action="#">
    <fieldset id="thongtinDonGian">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) đơn giản (text, textarea, select)</h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Họ tên</td>
          <td>
            <input type="text" name="txtHoTen" id="txtHoTen" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Địa chỉ</td>
          <td>
            <input type="text" name="txtDiaChi" id="txtDiaChi" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Ngày/tháng/năm sinh</td>
          <td>
            <input type="text" name="txtNgayThangNamSinh" id="txtNgayThangNamSinh" />
          </td>
        </tr>
        <tr>
          <td class="tieude">Sở thích cá nhân</td>
          <td>
            <textarea name="txtSoThichCaNhan" id="txtSoThichCaNhan" rows="5"></textarea>
          </td>
        </tr>
      </table>
    </fieldset>
    <fieldset id="thongtinPhucTap">
      <h3 align="center">Các thành phần nhập liệu (controls/fields) (radio/checkbox) </h3>
      <table border="1" class="tblThongTinCaNhan">
        <tr>
          <td class="tieude" width="150px">Giới tính</td>
          <td>
            <!--
              Quy định trong dữ liệu
              - 0: Nam
              - 1: Nữ
            -->
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_1" value="0" /> Nam </label>
            <br />
            <label><input type="radio" name="rdGioiTinh" id="rdGioiTinh_2" value="1" /> Nữ </label>
          </td>
        </tr>
        <tr>
          <td class="tieude">Đăng ký môn học</td>
          <td>
            <!--
              Quy định trong dữ liệu
              - W1: Khóa học Web căn bản HTML, CSS, JS
              - W2: Khóa học Web nâng cao MySQL, PHP
              - TD1: Khóa học Tư duy Giải thuật
            -->
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_1" value="W1" /> Khóa học Web căn bản HTML,
              CSS, JS </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_2" value="W2" /> Khóa học Web nâng cao MySQL,
              PHP </label>
            <br />
            <label><input type="checkbox" name="chkMonHoc" id="chkMonHoc_3" value="TD1" /> Khóa học Tư duy Giải thuật
            </label>
          </td>
        </tr>
      </table>
    </fieldset>
    <center>
      <input type="button" name="btnGoiDuLieu" id="btnGoiDuLieu" value="Gởi dữ liệu" />
      <input type="reset" name="btnXoaTrangDuLieu" id="btnXoaTrangDuLieu" value="Xóa trắng dữ liệu" />
    </center>
  </form>


  <!-- Phần trình bày Giao diện HTML - END -->



  <!-- Phần xử lý code JavaScript - START -->
  <!-- Nên viết tất cả các đoạn xủ lý JavaScript vào phần cuối trang, trước khi đóng thẻ <body> là cách viết tốt nhất -->
  <!-- Liên kết thư viện Jquery -->
  <script src="vendor/jquery/jquery.min.js"></script>

  <!-- Liên kết thư viện JQUERY UI -->
  <script src="vendor/jquery-ui/jquery-ui.min.js"></script>

  <!-- Viết code Jquery -->
  <script>
    // Yêu cầu JQUERY UI thay thế INPUT text có id="txtNgayThangNamSinh" thành công cụ chọn ngày tháng Date Picker
    $('#txtNgayThangNamSinh').datepicker(
      {
        showButtonPanel: true,    // option hiển thị nút "Today", "Done"
        dateFormat: 'dd/mm/yy'    // option Định dạng format ngày tháng; d: Day Ngày; m: Month tháng; y: Year năm
      }
    );
  </script>
  <!-- Phần xử lý code JavaScript - END -->
</body>

</html>