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âu trả lời trực tiếp ngắn gọn là không hoặc không nằm ngoài dự đoán nhưng tôi đã nghĩ ra một phương pháp sử dụng hộp văn bản và mã JS thuần túy để mô phỏng đầu vào ngày tháng và thực hiện bất kỳ định dạng nào bạn muốn, đây là mã

date : 

    ▼


  

1- xin lưu ý rằng phương pháp này chỉ hoạt động cho trình duyệt hỗ trợ loại ngày.

2- chức năng đầu tiên trong mã JS dành cho trình duyệt không hỗ trợ kiểu ngày tháng và đặt giao diện thành kiểu nhập văn bản bình thường.

3- nếu bạn sử dụng mã này cho nhiều đầu vào ngày tháng trong trang của mình, vui lòng thay đổi ID "xTime" của đầu vào văn bản trong cả lệnh gọi hàm và bản thân đầu vào thành một thứ khác và tất nhiên hãy sử dụng tên của đầu vào bạn muốn cho gửi biểu mẫu.

4-trên chức năng thứ hai, bạn có thể sử dụng bất kỳ định dạng nào bạn muốn thay vì ngày + "/" + tháng + "/" + năm, ví dụ năm + "/" + tháng + "/" + ngày và trong đầu vào văn bản sử dụng trình giữ chỗ hoặc giá trị như yyyy / mm / dd cho người dùng khi tải trang.