Nếu chúng ta chưa biết cách thêm datepicker vào bootstrap thì ví dụ sau sẽ hữu ích cho chúng ta. Đôi khi dự án của chúng tôi yêu cầu tùy chọn chọn ngày. Nếu chúng ta muốn kích hoạt trường nhập liệu để nhập ngày, datepicker sẽ rất hữu ích. Sử dụng cái này, chúng ta có thể dễ dàng chọn ngày và nó thân thiện với người dùng. Thay vì nhập ngày thủ công vào trường nhập, chúng ta có thể chọn ngày từ hộp thoại Datepicker. Điều này có thể tránh được lỗi người dùng vì nó sẽ cho phép chúng tôi xem ngày trong tuần tương ứng cho mỗi ngày. Nó cũng sẽ cung cấp cho chúng tôi một sự tỏa sáng tương tác bổ sung trong biểu mẫu của chúng tôi. Giả sử chúng ta biết về Bootstrap, đang làm việc với nó và muốn thêm công cụ hẹn hò. Trong trường hợp này, thư viện datepicker bootstrap sẽ rất hữu ích

Nếu chúng tôi đang sử dụng plugin Bootstrap Datepicker, chúng tôi sẽ dễ dàng xử lý tất cả các công việc bẩn. Chúng ta có rất nhiều lựa chọn về datepicker nhưng đầy đủ tính năng và thư viện phổ biến nhất là Bootstrap datepicker. Công cụ hẹn hò yêu cầu thư viện JavaScript phổ biến. Chúng tôi đã sử dụng nó trong ví dụ của chúng tôi. Khung bootstrap không chứa datepicker, giống như bất kỳ tiện ích bổ sung nào khác

Giả sử chúng ta biết về bootstrap, đang làm việc với nó và muốn thêm datepicker. Trong trường hợp này, thư viện datepicker bootstrap sẽ rất hữu ích. Trong ví dụ sau, chúng ta sẽ thấy việc triển khai datepicker trong bootstrap, sử dụng datepicker bootstrap, cài đặt datepicker trong bootstrap datepicker hoặc sử dụng bootstrap datepicker trong php

Bootstrap có nhiều tính năng và thành phần nâng cao. Nó làm cho các ứng dụng thân thiện với người dùng hơn. Công cụ chọn ngày bootstrap là một tính năng nâng cao của bootstrap để chọn ngày trong các ứng dụng web. Bộ đếm ngày có thể chọn ngày, tháng, năm theo ngày yêu cầu. Chúng ta có thể chọn ngày trong quá khứ và tương lai trong nhiều thập kỷ một cách dễ dàng. Datepicker cho phép chọn ngày bắt đầu và ngày kết thúc trong plug-in datepicker. Công cụ chọn ngày được hỗ trợ để bật và tắt ngày hạn chế

cú pháp

• Công cụ hẹn hò bootstrap hoạt động với công nghệ bootstrap và jquery
• Có hai cách để đạt được datepicker
• Cú pháp datepicker bên dưới
• Cú pháp bootstrap bên dưới

Date:  

• Cú pháp Jquery bên dưới

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

• Bootstrap đã sử dụng một thuộc tính để lấy datepickert trong bootstrap. Đây là phương pháp thứ hai của datepicker
• Cú pháp của datepicker dưới đây

Bootstrap Datepicker hoạt động như thế nào?

Liên kết datepicker được thêm bằng liên kết bootstrap và jquery trên trang tạo web

Công cụ hẹn hò đạt được bằng hai phương pháp

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, kiểm thử phần mềm và những thứ khác

Hai phương pháp dưới đây

1. Sử dụng thuộc tính data-provide=”datepicker ” trong bootstrap

2. Sử dụng công nghệ bootstrap và JavaScript/jquery cho datepicker

 bootstrap Datepicker 

Bộ đếm ngày có nhiều sự lựa chọn để kiểm soát và sửa đổi ngày theo yêu cầu

Các tùy chọn sau đây ở bên dưới

Gói phát triển phần mềm tất cả trong một(hơn 600 khóa học, hơn 50 dự án)

Giá
Xem các khóa học

Hơn 600 khóa học trực tuyến. hơn 50 dự án. Hơn 3000 giờ. Giấy chứng nhận có thể kiểm chứng. Truy cập trọn đời
4. 6 (86.697 xếp hạng)

• ngày bắt đầu. Ngày bắt đầu là ngày trước đó. Chúng ta có thể chọn ngày hoặc giá trị như (-5d), (-6m), (-2y)

• Ngày cuối. Ngày kết thúc là ngày kết thúc được chọn ngày hoặc giá trị

• Ngôn ngữ. Bộ đếm ngày có thể thay đổi các ngôn ngữ khác nhưng ngôn ngữ mặc định là tiếng Anh

• Định dạng. Định dạng ngày có thể chọn theo người dùng thân thiện và dễ hiểu

Định dạng có thể được đặt với sự kết hợp của yy, yyyy, m, mm, d, dd, YY, YYYY, M, MM, D, DD

Định dạng mặc định là mm/dd/yyyy và một định dạng có thể sử dụng khác là dd/mm/yyyy

 bootstrap Datepicker 

Công cụ hẹn hò đã sử dụng nhiều phương thức trong thẻ tập lệnh

• Show – Phương thức này hiển thị plugin datepicker

$('#example').datepicker ('show');

• Hide – Phương pháp này ẩn plugin datepicker

• Phá hủy – Plugin xóa và đính kèm các sự kiện vào phần tử

$('#example').datepicker ('destroy');

• getDate - Ngày trả về từ datepicker

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

• getStartDate – Giới hạn thấp hơn hoặc ngày sớm trả về từ datepicker

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

• setStartDate – Giới hạn dưới hoặc ngày sớm được đặt từ datepicker

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

• getEndDate - Ngày giới hạn trên trả về từ datepicker

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

• setEndDate – Ngày giới hạn trên được đặt từ datepicker

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

ví dụ

Dưới đây là các ví dụ sau được đề cập dưới đây

Ví dụ 1

Ví dụ về công cụ hẹn hò đơn giản với hai phương thức bên dưới

Mã số

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

đầu ra

đầu ra

Ví dụ #2

Ví dụ về datepicker với các điều kiện bên dưới

Mã số

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

đầu ra

Ví dụ #3

Công cụ hẹn hò với ví dụ về phương pháp ở bên dưới

Mã số

$ (document).ready( function() {
$ ("# datepicker") .datepicker();
});

đầu ra

Phần kết luận

• Công cụ hẹn hò là một plugin nhẹ và thành phần thân thiện với người dùng trong bootstrap
• Nó giúp chọn ngày dễ dàng
• Nó giúp kiểm soát ngày hạn chế

Bài viết được đề xuất

Đây là hướng dẫn về Bootstrap Datepicker. Ở đây chúng tôi thảo luận về cách Bootstrap Datepicker hoạt động với các ví dụ tương ứng. Bạn cũng có thể xem các bài viết sau để tìm hiểu thêm –

Làm cách nào để tạo một công cụ hẹn hò trong Bootstrap?

Làm cách nào để sử dụng công cụ hẹn hò trong Bootstrap 5?

Bootstrap 4 có DateTimepicker không?

Bộ chọn ngày giờ cho Bootstrap 5 là gì?