Hướng dẫn how do i add a calendar in bootstrap? - làm cách nào để thêm lịch trong bootstrap?

Hướng dẫn này sẽ dạy bạn cách thêm trình chọn ngày vào biểu mẫu của bạn bằng các công cụ nguồn mở. Một người chọn ngày là một thả xuống tương tác giúp bạn dễ dàng chọn ngày từ lịch thay vì gõ thủ công. Đó là một cách tuyệt vời để tránh lỗi người dùng vì bạn có thể thấy ngày tương ứng trong tuần cho mỗi ngày. Thêm vào đó, nó cung cấp cho hình thức của bạn thêm một chút độ bóng tương tác!

Xem bản demo tùy chỉnh bản demo tải xuống trực tuyến demo

Bootstrap-Datepicker plugin

Chúng tôi sẽ sử dụng plugin bootstrap-datepicker để xử lý tất cả các công việc bẩn. Có một số tùy chọn chọn ngày ngoài kia, nhưng Bootstrap-DatePicker là một trong những thư viện phổ biến và đầy đủ nhất có sẵn. Tuy nhiên, nếu thay vì một ngày duy nhất, bạn muốn một người chọn ngày mở rộng trong một phạm vi ngày, bạn có thể xem xét tùy chọn này.

Plugin Picker ngày có sẵn thông qua CloudFlare CDN hoặc bạn có thể tải xuống từ GitHub.

Điều kiện tiên quyết

Để tạo người chọn ngày của chúng tôi, chúng tôi sẽ cần các điều kiện tiên quyết sau:

1. Bootstrap 3 (CDN) Nếu bạn không sử dụng Bootstrap trên trang web của mình, bạn có thể sử dụng phiên bản Bootstrap bị cô lập này. Người chọn ngày sẽ hoạt động với Bootstrap 2, nhưng hướng dẫn này dính vào Bootstrap 3. (cdn)
   If you aren't using Bootstrap on your site, you can use this isolated version of bootstrap. The date picker will work with Bootstrap 2, but this tutorial sticks with Bootstrap 3.
2. JQuery 1.71+ (CDN) Thư viện JavaScript phổ biến này là cần thiết bởi trình chọn ngày. Bạn có thể đã sử dụng nó trên trang web của mình. (cdn)
   This popular JavaScript library is needed by the date picker. You're likely already using it on your site.

Sau khi thêm bootstrap-datepicker và các điều kiện tiên quyết, tiêu đề của trang web của bạn sẽ trông giống như thế này:

Bước 1: Tạo biểu mẫu

Đầu tiên, chúng ta cần tạo một biểu mẫu bao gồm một ngày . Bạn có thể viết điều này bằng tay bằng cách sử dụng cú pháp Bootstrap Form hoặc bạn có thể sử dụng Trình tạo biểu mẫu Bootstrap phổ biến của chúng tôi. Mã biểu mẫu của bạn sẽ trông như thế này:

 

  

   


    
    

      
 
        Date
        
      
      
 
        Submit
      
     
      

    
  
    
 

Các divs .container-fluid, .row và .col-md-6 .col-sm-6 .col-xs-12 là một phần của hệ thống lưới bootstrap sẽ làm cho chiều rộng của biểu mẫu phản ứng với nhiều thiết bị khác nhau.

Tất cả các mã bootstrap được bọc trong một div .bootstrap-iso cho biết tệp bootstrap-iso.css rằng chúng tôi muốn sử dụng kiểu dáng bootstrap trong DIV. Nếu bạn đã sử dụng Bootstrap CSS trên trang web của mình, bạn có thể bỏ qua Div này.

Lưu ý rằng tôi đã cho đầu vào một

 

  

   


    
    

      
 
        Date
        
      
      
 
        Submit
      
     
      

    
  
    
 

 

  

   


    
    

      
 
        Date
        
      
      
 
        Submit
      
     
      

    
  
    
 

Bước 3: Thiết lập và khởi tạo plugin DatePicker

Tất cả những gì còn lại là viết một đoạn JavaScript để nói với plugin DatePicker ở đâu để tìm ngày

 

  

   


    
    

      
 
        Date
        
      
      
 
        Submit
      
     
      

    
  
    
 

Đầu tiên, chúng tôi sử dụng jQuery để đợi cho đến khi các yếu tố trang đã tải xong. Sau đó, chúng tôi chọn ngày .date .

Nếu người dùng đang sử dụng phiên bản bootstrap bị cô lập của chúng tôi, chúng tôi chọn container div `.bootstrap-iso '. Bằng cách này, chúng ta có thể nói với trình chọn ngày để nối phần tử tương tác trong DIV nơi Bootstrap CSS đang được áp dụng.within the div where Bootstrap CSS is being applied.

Có một số tùy chọn plugin có thể được mô tả trong tài liệu. Đối với mục đích của chúng tôi, chúng tôi chỉ định định dạng của ngày, xác định một phần tử container, làm nổi bật ngày hôm nay và đóng cửa sổ bật lên tương tác sau khi một ngày được chọn. Tất cả những gì, tất cả những gì còn lại là khởi tạo plugin.

Mã hoàn chỉnh mà chúng tôi sẽ sử dụng trông như thế này:

Nếu bạn muốn kiểm tra các tùy chọn plugin khác nhau, plugin sẽ cung cấp một hộp cát hữu ích. Nó cho phép bạn kiểm tra đầu vào, xem trước DatePicker và xem mã tùy chọn ví dụ.

Hướng dẫn xây dựng biểu mẫu bootstrap

Hướng dẫn trên có thể được mã hóa bằng tay. Tuy nhiên, một cách dễ dàng hơn nhiều để hoàn thành hướng dẫn là sử dụng trình tạo mẫu bootstrap của chúng tôi. Nếu bạn đi theo con đường này, đơn giản là:

1. Tạo một biểu mẫu mới tại https://formden.com/form-builder/
2. Xóa tất cả các trường hiện có
3. Tạo một đầu vào văn bản dòng duy nhất với tên/id

   
    
   
     
   
      
   
   
       
       
   
         
    
           Date
           
         
         
    
           Submit
         
        
         
   
       
     
       
    
   
   

   4Single Line Text input with name/id

   
    
   
     
   
      
   
   
       
       
   
         
    
           Date
           
         
         
    
           Submit
         
        
         
   
       
     
       
    
   
   

   4
4. Nhấp vào tab Cài đặt và thêm mã sau vào phần JavaScript/CSS thêm:Settings Tab and add the following code to the Extra JavaScript/CSS section:

Dưới đây là hướng dẫn video ngắn sẽ đưa bạn qua quá trình:

Làm cách nào để thêm một lịch vào bootstrap?

Bootstrap có lịch không?

Làm cách nào để tạo lịch trong Bootstrap 4?

Có một DatePicker bootstrap?