Bộ chọn ngày trong Bootstrap là một plugin bổ sung chức năng chọn thời gian mà không cần sử dụng mã JavaScript tùy chỉnh.

Bạn đang xem : ngày loại đầu vào bootstrap

Tài liệu này có thể chứa cú pháp được giới thiệu trong MDB 4.17.0 và có thể không tương thích với các phiên bản trước. Để có tài liệu về Bộ chọn ngày cũ, vui lòng truy cập liên kết.

Bộ chọn ngày trong Bootstrap là một plugin bổ sung chức năng chọn thời gian mà không cần sử dụng mã JavaScript tùy chỉnh.

Lưu ý: Tài liệu này dành cho phiên bản cũ hơn của Bootstrap (v.4). Đã có phiên bản mới hơn cho Bootstrap 5. Chúng tôi khuyên bạn nên chuyển sang phiên bản mới nhất của sản phẩm của chúng tôi – Material Design cho Bootstrap 5. Đi tới tài liệu v.5

Để luôn nhất quán với điều này, bất cứ khi nào sử dụng số nguyên liên quan đến một tháng, bộ chọn ngày coi nó như không được lập chỉ mục. Ngày dưới dạng chuỗi vẫn được phân tích cú pháp như mong đợi.

Các tháng trong đối tượng Ngày trong JavaScript không được lập chỉ mục. Có nghĩa là, Ngày mới (2015, 3, 20) là ngày 20 tháng 4 năm 2015.

Để sử dụng Material DatePicker của chúng tôi, bạn phải khởi tạo nó trước bằng mã bên dưới.

Ngày mới bộ chọn sẽ mở ra khi bạn nhấp vào biểu tượng ở phía bên phải, không phải khi nhập.

Để luôn nhất quán với điều này, bất cứ khi nào một số nguyên được sử dụng để tham chiếu đến một tháng, bộ chọn ngày sẽ coi nó là không được lập chỉ mục. Ngày dưới dạng chuỗi vẫn được phân tích cú pháp như mong đợi.

Các tháng trong đối tượng Ngày trong JavaScript không được lập chỉ mục. Có nghĩa là, Ngày mới (2015, 3, 20) là ngày 20 tháng 4 năm 2015.

Đây là các cài đặt mặc định được áp dụng cho lời gọi cơ bản ở trên. Để thay đổi chúng, chỉ cần khởi tạo Công cụ chọn ngày với các giá trị mong muốn.

Tùy biến

Chuỗi

Thay đổi nhãn tháng và ngày trong tuần theo ý muốn:

        
            
        $ ('. datepicker'). datepicker ({
          các ngày trong tuầnShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
          showMonthsShort: true
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "customDays" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "Tùy chỉnh" class = "form-control" & gt;
          & lt; label for = "Tùy chỉnh" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Các nút

Thay đổi văn bản hoặc ẩn hoàn toàn một nút bằng cách chuyển giá trị false-y:

Nhãn trợ năng

Thay đổi các thuộc tính title thành một số phần tử trong bộ chọn:

        
            
        $ ('. datepicker'). datepicker ({
          labelMonthNext: 'Chuyển sang tháng tiếp theo',
          labelMonthPrev: 'Chuyển đến tháng trước',
          labelMonthSelect: 'Chọn một tháng từ menu thả xuống',
          labelYearSelect: 'Chọn một năm từ menu thả xuống',
          selectMonths: true,
          selectYears: true
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "accLabels" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "accessibility-example" class = "form-control" & gt;
          & lt; label for = "accessibility-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Bản dịch

Bộ chọn có thể được mở rộng để thêm hỗ trợ cho quá trình quốc tế hóa. Bản dịch cho hơn 40
ngôn ngữ
có sẵn ngay lập tức, bạn có thể đưa vào một trong các ngôn ngữ
hai cách:


            
        // Mở rộng các tùy chọn bộ chọn mặc định cho tất cả các trường hợp.
        $ .extend ($. fn.datepicker.defaults, {
          Tháng đầy đủ: ["Tháng Giêng", "Tháng Hai", "Tháng Ba", "Tháng Tư", "Tháng Năm", "Tháng Sáu", "Tháng Bảy", "Tháng Tám", "Tháng Chín", "Tháng Mười",
          'Tháng Mười Một tháng Mười Hai'],
          các ngày trong tuần Ngắn: ['Chủ nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
          hôm nay ngày hôm nay',
          Rõ ràng rõ ràng',
          formatSubmit: 'yyyy / mm / dd'
        })

        // Hoặc, chuyển các tháng và ngày trong tuần dưới dạng một mảng cho mỗi lời gọi.
        $ ('. datepicker'). datepicker ({
          Tháng đầy đủ: ["Tháng Giêng", "Tháng Hai", "Tháng Ba", "Tháng Tư", "Tháng Năm", "Tháng Sáu", "Tháng Bảy", "Tháng Tám", "Tháng Chín", "Tháng Mười",
          'Tháng Mười Một tháng Mười Hai'],
          các ngày trong tuần Ngắn: ['Chủ nhật', 'Thứ Hai', 'Thứ Ba', 'Thứ Tư', 'Thứ Năm', 'Thứ Sáu', 'Thứ Bảy'],
          Rõ ràng rõ ràng',
          formatSubmit: 'yyyy / mm / dd'
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "Translat" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "Translat-example" class = "form-control" & gt;
          & lt; label for = "Translat-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Lưu ý:

Khi sử dụng bản dịch, hãy chỉ định formatSubmit và data-value để đảm bảo ngày
phân tích cú pháp chính xác bất kể ngôn ngữ.

Định dạng

Hiển thị định dạng thân thiện với con người và sử dụng định dạng thay thế để gửi tới máy chủ.

Điều này được thực hiện bằng cách tạo một phần tử input ẩn mới có cùng thuộc tính name với thuộc tính
bản gốc với tiền tố / hậu tố tùy chọn:

        
            
        $ ('. datepicker'). datepicker ({
          // Thoát bất kỳ ký tự “quy tắc” nào có dấu chấm than (!).
          format: 'Bạn chọn! d: dddd, dd mmm, yyyy',
          formatSubmit: 'yyyy / mm / dd',
          hiddenPrefix: 'prefix__',
          hiddenSuffix: '__suffix'
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "formatSection" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "format-example" class = "form-control" & gt;
          & lt; label for = "format-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Chỉ gửi giá trị ẩn

Phần lớn thời gian, giá trị cần được gửi đến máy chủ chỉ là giá trị ẩn – chứ không phải
một cái nhìn thấy được. Để thực hiện điều này, hãy sử dụng tùy chọn hiddenName .

Điều này thực chất là vô hiệu hóa hiddenPrefix hiddenSuffix , loại bỏ name
từ nguồn input , rồi đặt nó làm name của ẩn
đầu vào :

        
            
        $ ('. datepicker'). datepicker ({
        các ngày trong tuầnShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
        showMonthsShort: true
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "formatSection" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "format-example" class = "form-control" & gt;
          & lt; label for = "format-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Điền trước các giá trị bằng cách sử dụng các định dạng hoặc bản dịch tùy chỉnh

Khi sử dụng quy tắc định dạng tùy chỉnh cho tùy chọn định dạng hoặc khi
bằng cách sử dụng bản dịch , phần tử input phải được cung cấp
data-value
thuộc tính được định dạng
sử dụng [yyyy, m, dd] trong khi số tháng được tính từ 0 đến 11 – giá trị của phần tử có thể được để lại
trống. Điều này giúp phân tích cú pháp
ngày từ các định dạng tùy chỉnh sang các ngôn ngữ khác nhau:

Quy tắc định dạng

Các quy tắc sau có thể được sử dụng để định dạng bất kỳ ngày nào:

Qui định
Sự mô tả
Kết quả

d
Ngày trong tháng
1 – 31

dd
Ngày trong tháng có số 0 ở đầu
01 – 31

ddd
Ngày trong tuần ở dạng ngắn
CN – T7

dddd
Ngày trong tuần ở dạng đầy đủ
Thứ bảy chủ nhật

m
Thang của năm
1 – 12

mm
Tháng trong năm với số 0 ở đầu
01 – 12

mmm
Tên tháng ở dạng ngắn gọn
Tháng 1 – Tháng 12

mmmm
Tên tháng ở dạng đầy đủ
Tháng 1 – Tháng 12

yy
Năm ở dạng ngắn gọn *
00 – 99

yyyy
Năm ở dạng đầy đủ
2000 – 2999

Lưu ý:

Nếu bạn sử dụng quy tắc yy trong tùy chọn format , bạn phải chỉ định yyyy
qui định
ở tùy chọn formatSubmit với data-value thích hợp
thuộc tính để đảm bảo
ngày phân tích cú pháp chính xác.

Không bao giờ sử dụng quy tắc yy trong tùy chọn formatSubmit .

Ngày đầu tiên trong tuần

Ngày đầu tiên của tuần có thể được đặt thành Chủ Nhật hoặc Thứ Hai. Bất cứ điều gì sự thật-y đặt nó là Thứ Hai và bất cứ điều gì
false-y là Chủ nhật:

        
            
        $ ('. datepicker'). datepicker ({
          ngày đầu tiên: 0
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "firstWeekday" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "firstWeekday-example" class = "form-control" & gt;
          & lt; label for = "firstWeekday-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Đặt ngày tối thiểu và tối đa có thể chọn trên bộ chọn:

1. Sử dụng đối tượng JavaScript Date :

        
            
        $ ('. datepicker'). datepicker ({min: new Date (2015,3,20),
          max: new Date (2015,7,14)
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "example" class = "form-control" & gt;
          & lt; label for = "example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

2. Sử dụng các mảng được định dạng là [YEAR, MONTH, DATE]

3. Sử dụng số nguyên hoặc boolean

        
            
        $ ('. datepicker'). datepicker ({
          // Một số nguyên (dương / âm) đặt nó tương đối với ngày hôm nay.
          tối thiểu: -15,
          // `true` đặt nó thành ngày hôm nay. `false` loại bỏ mọi giới hạn.
          tối đa: đúng
        })
      
        
    

            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "example" class = "form-control" & gt;
          & lt; label for = "example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Vô hiệu hóa một bộ ngày cụ thể hoặc tùy ý có thể chọn trên bộ chọn.

Bạn có thể làm điều đó bằng cách:

1. Sử dụng đối tượng JavaScript Date

        
            
        $ ('. datepicker'). datepicker ({
          vô hiệu hóa: [
            Ngày mới (2015,3,13),
            Ngày mới (2015,3,29)
          ]
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" id = "firstDisable" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "firstDisable-example" class = "form-control" & gt;
          & lt; label for = "firstDisable-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

2. Sử dụng các mảng được định dạng là [YEAR, MONTH, DATE]

3. Sử dụng số nguyên làm các ngày trong tuần (1 đến 7)

        
            
        $ ('. datepicker'). datepicker ({
          vô hiệu hóa: [
            1, 4, 7
          ]
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "example" class = "form-control" & gt;
          & lt; label for = "example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

4. Sử dụng các đối tượng làm phạm vi ngày tháng

Lưu ý:

Khi nói đến việc tắt các ngày cụ thể, các giá trị cho from & amp; thành
có thể là một đối tượng JavaScript Date , một mảng được định dạng là [YEAR, MONTH, DATE] hoặc
Giá trị boolean
( true đặt ngày là “hôm nay”).

Các giá trị cũng có thể là các số nguyên đại diện cho các ngày liên quan đến các ngày khác, trong đó thành chỉ có thể là
dương ( {from: [2016,3,12], to: 10} ), trong khi
from chỉ có thể là số âm ( {from: -10, to: true} )

5. Vô hiệu hóa tất cả với một loạt các trường hợp ngoại lệ

Chỉ cho phép một nhóm ngày cụ thể hoặc tùy ý bằng cách đặt mục đầu tiên trong bộ sưu tập là
true :

        
            
        $ ('. datepicker'). datepicker ({
          vô hiệu hóa: [
            thật,
            1, 4, 7,
            [2015,3,3],
            [2015,3,12],
            [2015,3,20],
            Ngày mới (2015,3,13),
            Ngày mới (2015,3,29)
          ]
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "example" class = "form-control" & gt;
          & lt; label for = "example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

6. Vô hiệu hóa phạm vi có ngoại lệ

Bật các ngày nằm trong phạm vi ngày bị vô hiệu hóa bằng cách thêm tham số đảo ngược vào mục trong
bộ sưu tập:


            
        $ ('. datepicker'). datepicker ({
          vô hiệu hóa: [
            5,
            [2015, 10, 21, 'ngược'],
            {từ: [2016, 3, 15], đến: [2016, 3, 25]},
            [2016, 3, 20, 'ngược'],
            {from: [2016, 3, 17], to: [2016, 3, 18], inverted: true}
          ]
        })
      
        
    
        
            
        & lt; div class = "md-form md-outline input-with-post-icon datepicker" & gt;
          & lt; input placeholder = "Chọn ngày" type = "text" id = "example" class = "form-control" & gt;
          & lt; label for = "example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; i class = "fas fa-calendar input-prefix" tabindex = 0 & gt; & lt; / i & gt;
        & lt; / div & gt;
      
        
    

Sự kiện

Kích hoạt các sự kiện khi người dùng tương tác với bộ chọn:

Nhìn trên bảng điều khiển

Hiển thị mã


Chỉnh sửa trong hộp cát

        
            
          $ ('. datepicker'). datepicker ({
            onStart: function () {
              console.log ('Xin chào :)')
            },
            onRender: function () {
              console.log ('Chà .. được hiển thị lại')
            },
            onOpen: function () {
              console.log ('Đã mở')
            },
            onClose: function () {
              console.log ('Hiện đã đóng cửa')
            },
            onStop: function () {
              console.log ('Hẹn gặp lại.')
            },
            onSet: function (context) {
              console.log ('Chỉ cần đặt nội dung:', context)
            }
          })
        
        
    
        
            
          & lt; div class = "md-form" & gt;
            & lt; input placeholder = "Ngày đã chọn" type = "text" id = "date-picker-example" class = "form-control datepicker" & gt;
            & lt; label for = "date-picker-example" & gt; Hãy thử tôi ... & lt; / label & gt;
          & lt; / div & gt;
        
        
    


Xem thêm những thông tin liên quan đến chủ đề ngày loại đầu vào bootstrap

Bootstrap

  • Tác giả: Ngọc Trần
  • Ngày đăng: 2021-08-30
  • Đánh giá: 4 ⭐ ( 5590 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Hướng dẫn và ví dụ Bootstrap Form

  • Tác giả: openplanning.net
  • Đánh giá: 4 ⭐ ( 1354 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Học Grid System trong Bootstrap, cú pháp và ví dụ minh họa

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 5 ⭐ ( 3778 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: grid system trong bootstrap, Học Grid System trong Bootstrap, cú pháp và ví dụ minh họa

Component Form Và Input Trong Bootstrap (Phần 7)

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 7949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Hôm nay mình sẽ giới thiệu tiếp về các component Form và Input trong Bootstrap 4. Nào hãy cũng mình tìm hiểu nhé!

Tắt thời gian trong bộ chọn thời gian ngày bootstrap