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ụ:

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

  1: 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:

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

  2
• 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:

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

  3
• 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

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

  4
• Nội dung file:

  
  
  
  Học JQuery | NenTang.vn

  
  

  



  

  
Nền tảng Kiến thức | https://nentang.vn


  
    

      
Các thành phần nhập liệu (controls/fields) đơn giản (text, textarea, select)
      

        

          
Họ tên
          

            
          
        
        

          
Địa chỉ
          

            
          
        
        

          
Ngày/tháng/năm sinh
          

            
          
        
        

          
Sở thích cá nhân
          

            
          
        
      
    
    

      
Các thành phần nhập liệu (controls/fields) (radio/checkbox) 
      

        

          
Giới tính
          

            
             Nam 
            

             Nữ 
          
        
        

          
Đăng ký môn học
          

            
             Khóa học Web căn bản HTML,
              CSS, JS 
            

             Khóa học Web nâng cao MySQL,
              PHP 
            

             Khóa học Tư duy Giải thuật
            
          
        
      
    
    
      
      
    
  


  



  
  
  
  

  
  

  
  
  

Link minh họa

http://frontend-basic.learning.nentang.vn/course-jquery/tich-hop-cong-cu-chon-ngay-thang-date-picker/index.html

Cách sử dụng các hàm trên khá đơn giản, vì nó là các phương thức của đối tượng Date nên bạn chỉ việc gọi ra và dùng.

// Đối tượng thời gian hiện tại
var d = new Date();
 
d.getDate();
d.getDay();
d.getFullYear();
d.getYear();
d.getHours();
d.getMilliseconds();
d.getMinutes();
d.getMonth();
d.getSeconds();
d.getTime();

Lưu ý: với hàm lấy ngày trong tuần getDay() bạn phải cộng lên một thì mới có kết quả chính xác vì nó tính từ 0.

2. Các nhàm nhóm Date Set trong Javascript

Tương ứng với mỗi hàm Date Get thì sẽ có một hàm Date Set (trừ hàm getDay()).

• setDate() thiết lập ngày (1 - 31)
• setFullYear() thiết lập năm đầy đủ (YYYY)
• setYear() thiết lậpnăm 2 số cuối (YY)
• setHours() thiết lập số giờ (0 - 23)
• setMiliSeconds() thiết lập số mili giây (0 - 999)
• setMinutes() thiết lập số phút (0 - 59)
• setMonth() thiết lập tháng (0 - 11)
• setSeconds() thiết lập số giây (0 - 59)
• setTime() thiết lập thời gian đã được convert sang dạng miliseconds.

Lưu ý:

• Vì đây là hàm set nên bạn phải truyền tham số vào.
• Các hàm có ảnh hưởng lẫn nhau nhé các bạn, ví dụ bạn thiết lập ngày giờ không đúng thì nó sẽ lấy ngày giờ mặc định.
• Nếu bạn dùng hàm setTime() để thiết lập thì nó ảnh hưởng tới tất cả các giá trị còn lại bởi vì setTime() là hàm thiết lập thời gian đầy đủ đã chuyển sang dạng miniseconds.

// Đối tượng thời gian hiện tại
var d = new Date();
 
d.setDate(20);
d.setFullYear(2011);
d.setHours(2);
d.setMilliseconds(2);
d.setMinutes(3);
d.setMonth(4);
d.setSeconds(5);

3. Tạo đồng hồ online bằng Javascript

Để các bạn hiểu rõ hơn về ứng dụng của các hàm trong đối tượng Date thì mình sẽ làm một ví dụ hiển thị đồng hồ online, đây là đồng hồ được lấy từ giờ của hệ thống máy tính Client.