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

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

• 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

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 khóa học

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 (84.092 xếp hạng)

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

• 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 ngày trong Bootstrap datepicker?

Làm cách nào để sử dụng công cụ hẹn hò trong phương thức Bootstrap?

Bootstrap 4 có DateTimePicker không?

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