Ban đầu được tạo cho các báo cáo tại Cải tiến, trình chọn phạm vi ngày có thể được đính kèm với bất kỳ yếu tố trang web nào để bật lên hai lịch để chọn ngày, thời gian hoặc phạm vi được xác định trước như "30 ngày qua". Bắt đầu Để bắt đầu, bao gồm các tệp của JQuery, Moment.js và Date Range Picker trong trang web của bạn: Sau đó đính kèm trình chọn phạm vi ngày vào bất cứ thứ gì bạn muốn kích hoạt nó: Bạn có thể tùy chỉnh trình chọn phạm vi ngày với các tùy chọn và được thông báo khi người dùng chọn ngày mới bằng cách cung cấp chức năng gọi lại. Ví dụNgười chọn phạm vi ngày đơn giản với một cuộc gọi lạiNgười chọn phạm vi ngày với thời gianNgười chọn ngàyPhạm vi ngày được xác định trướcĐầu vào ban đầu trốngTùy chọn-
startDate (ngày hoặc chuỗi) Ngày bắt đầu của phạm vi ngày được chọn ban đầu. Nếu bạn cung cấp một chuỗi, nó phải khớp với chuỗi định dạng ngày được đặt trong cài đặt locale của bạn. -
endDate: (ngày hoặc chuỗi) Ngày kết thúc của phạm vi ngày được chọn ban đầu. -
minDate: (ngày hoặc chuỗi) Ngày sớm nhất mà người dùng có thể chọn. -
maxDate: (ngày hoặc chuỗi) Ngày mới nhất mà người dùng có thể chọn. -
maxSpan: (Đối tượng) Khoảng tối đa giữa ngày bắt đầu và kết thúc đã chọn. Kiểm tra maxSpan trong trình tạo cấu hình để biết ví dụ về cách sử dụng này. Bạn có thể cung cấp bất kỳ đối tượng nào Thư viện moment sẽ cho phép bạn thêm vào ngày. -
showDropdowns: (Đúng/Sai) Hiển thị năm và tháng chọn các hộp trên lịch để nhảy sang một tháng và năm cụ thể. -
minYear: (số) năm tối thiểu được hiển thị trong các thả xuống khi showDropdowns được đặt thành true. -
locale1: (số) năm tối đa được hiển thị trong các thả xuống khi showDropdowns được đặt thành true. -
locale3: (Đúng/Sai) hiển thị số tuần được định vị vào đầu mỗi tuần trên lịch. -
locale4: (Đúng/Sai) Hiển thị số tuần ISO vào đầu mỗi tuần trên lịch. -
locale5: (Đúng/Sai) Thêm các hộp chọn để chọn thời gian ngoài ngày. -
locale6: (Số) Tăng danh sách lựa chọn biên bản cho thời gian (nghĩa là 30 để chỉ cho phép lựa chọn thời gian kết thúc trong 0 hoặc 30). -
locale7: (Đúng/Sai) Sử dụng 24 giờ thay vì 12 giờ, loại bỏ lựa chọn AM/PM. -
locale8: (Đúng/Sai) hiển thị vài giây trong múi giờ. -
locale9: (Đối tượng) Đặt ngày được xác định trước Phạm vi người dùng có thể chọn. Mỗi khóa là nhãn cho phạm vi và giá trị của nó một mảng có hai ngày đại diện cho giới hạn của phạm vi. Nhấp vào locale9 trong trình tạo cấu hình cho các ví dụ. -
endDate1: (Đúng/Sai) Hiển thị "Phạm vi tùy chỉnh" ở cuối danh sách các phạm vi được xác định trước, khi tùy chọn locale9 được sử dụng. Tùy chọn này sẽ được tô sáng bất cứ khi nào lựa chọn phạm vi ngày hiện tại không khớp với một trong các phạm vi được xác định trước. Nhấp vào nó sẽ hiển thị lịch để chọn một phạm vi mới. -
endDate3: (Đúng/Sai) Thông thường, nếu bạn sử dụng tùy chọn locale9 để chỉ định phạm vi ngày được xác định trước, lịch chọn phạm vi ngày tùy chỉnh không được hiển thị cho đến khi người dùng nhấp vào "Phạm vi tùy chỉnh". Khi tùy chọn này được đặt thành True, lịch chọn phạm vi ngày tùy chỉnh luôn được hiển thị thay thế. -
endDate5: ('trái'/'phải'/'trung tâm') cho dù người chọn có xuất hiện được căn chỉnh bên trái, bên phải hay tập trung vào phần tử HTML mà nó được gắn vào. -
endDate6: ('xuống'/'UP'/'tự động') cho dù người chọn xuất hiện bên dưới (mặc định) hoặc trên phần tử HTML mà nó được đính kèm. -
endDate7: (Chuỗi) Tên lớp CSS sẽ được thêm vào cả nút Áp dụng và Hủy. -
endDate8: (Chuỗi) Tên lớp CSS sẽ chỉ được thêm vào nút Áp dụng. -
endDate9: (Chuỗi) Tên lớp CSS sẽ chỉ được thêm vào nút Hủy. -
locale: (Đối tượng) cho phép bạn cung cấp các chuỗi cục bộ cho các nút và nhãn, tùy chỉnh định dạng ngày và thay đổi ngày đầu tiên trong tuần cho lịch. Kiểm tra locale trong trình tạo cấu hình để xem cách tùy chỉnh các tùy chọn này. -
minDate2: (Đúng/Sai) chỉ hiển thị một lịch duy nhất để chọn một ngày, thay vì một người chọn phạm vi có hai lịch. Ngày bắt đầu và kết thúc được cung cấp cho cuộc gọi lại của bạn sẽ là cùng một ngày được chọn. -
minDate3: (Đúng/Sai) ẩn các nút Áp dụng và Hủy và tự động áp dụng phạm vi ngày mới ngay khi nhấp vào hai ngày. -
minDate4: (Đúng/Sai) Khi được bật, hai lịch được hiển thị sẽ luôn luôn trong hai tháng tuần tự (tức là tháng 1 và tháng 2), và cả hai sẽ được nâng cao khi nhấp vào mũi tên trái hoặc phải trên lịch. Khi bị vô hiệu hóa, hai lịch có thể được nâng cao riêng lẻ và hiển thị bất kỳ tháng/năm nào. -
minDate5: (Hàm) Một hàm được thông qua mỗi ngày trong hai lịch trước khi chúng được hiển thị và có thể trả về đúng hay sai để cho biết liệu ngày đó có khả dụng để lựa chọn hay không. minDate6: (Hàm) Một hàm được truyền mỗi ngày trong hai lịch trước khi chúng được hiển thị và có thể trả về một chuỗi hoặc mảng tên lớp CSS để áp dụng cho ô lịch của ngày đó.-
minDate7: (Đúng/Sai) cho biết liệu trình chọn phạm vi ngày có nên tự động cập nhật giá trị của phần tử minDate8 mà nó được đính kèm khi khởi tạo và khi ngày được chọn thay đổi. -
minDate9: (Chuỗi) Bộ chọn jQuery của phần tử cha mà người chọn phạm vi ngày sẽ được thêm vào, nếu không được cung cấp, đây sẽ là 'cơ thể'
Phương pháp Bạn có thể lập trình cập nhật một cách chính xác startDate và endDate trong trình chọn bằng các phương thức maxDate2 và maxDate3. Bạn có thể truy cập đối tượng Picker Date Range và các chức năng và thuộc tính của nó thông qua các thuộc tính dữ liệu của phần tử bạn đã đính kèm.
-
maxDate4: Đặt ngày bắt đầu hiện tại của Range Picker vào ngày -
maxDate5: Đặt ngày kết thúc hiện được chọn vào ngày của người chọn vào ngày được cung cấp
Ví dụ sử dụng: Sự kiện Một số sự kiện được kích hoạt trên phần tử bạn gắn trình chọn vào, mà bạn có thể nghe. -
maxDate6: được kích hoạt khi người chọn được hiển thị -
maxDate7: được kích hoạt khi người chọn được ẩn -
maxDate8: được kích hoạt khi lịch được hiển thị -
maxDate9: được kích hoạt khi lịch được ẩn -
maxSpan0: Được kích hoạt khi nhấp vào nút áp dụng hoặc khi nhấp vào phạm vi được xác định trước -
maxSpan1: Được kích hoạt khi nhấp vào nút Hủy
Một số ứng dụng cần "rõ ràng" thay vì chức năng "hủy", có thể đạt được bằng cách thay đổi nhãn nút và xem sự kiện hủy bỏ: Mặc dù việc chuyển cuộc gọi lại cho hàm tạo là cách dễ nhất để lắng nghe các thay đổi trong phạm vi ngày đã chọn, bạn cũng có thể làm điều gì đó mỗi khi nút áp dụng được nhấp ngay cả khi lựa chọn không thay đổi: Trình tạo cấu hìnhNgười chọn phạm vi ngày của bạnCấu hình của bạn để sao chépGiấy phépGiấy phép MIT (MIT) Bản quyền (c) 2012-2019 Dan Grossman Quyền được cấp, miễn phí, cho bất kỳ ai có được bản sao phần mềm này và các tệp tài liệu liên quan ("phần mềm"), để giải quyết phần mềm mà không bị hạn chế, bao gồm không giới hạn quyền sử dụng, sao chép, sửa đổi, hợp nhất , Xuất bản, Phân phối, Bán cấp và/hoặc Bán các bản sao của phần mềm và cho phép những người mà phần mềm được cung cấp để làm như vậy, tuân theo các điều kiện sau: Thông báo bản quyền trên và Thông báo quyền này sẽ được bao gồm trong tất cả các bản sao hoặc các phần đáng kể của phần mềm. Phần mềm được cung cấp "như là", không có bảo hành dưới bất kỳ hình thức nào, rõ ràng hay ngụ ý, bao gồm nhưng không giới hạn trong các bảo đảm của thương mại, thể lực cho một mục đích cụ thể và không bị thiếu sót. Trong mọi trường hợp, các tác giả hoặc chủ bản quyền sẽ phải chịu trách nhiệm đối với bất kỳ khiếu nại, thiệt hại hoặc trách nhiệm nào khác, cho dù trong hành động của hợp đồng, tra tấn hay nói cách khác, phát sinh từ hoặc liên quan đến phần mềm hoặc việc sử dụng hoặc các giao dịch khác trong PHẦN MỀM. Bình luận
Bootstrap 5 có một DatePicker không?
Bootstrap 5 Datepicker. Date Picker là một plugin thêm chức năng chọn thời gian mà không cần phải sử dụng mã JavaScript tùy chỉnh.. Date picker is a plugin that adds the function of selecting time without the necessity of using custom JavaScript code.
Làm cách nào để thêm một người chọn ngày vào bootstrap?
Tải xuống và bao gồm.Tải xuống JQuery và Bootstrap..... Khởi tạo.Tạo một phần tử đầu vào và khởi tạo nó bằng cách sử dụng một trong hai cách - .... Tùy chọn.Cú pháp (thuộc tính dữ liệu)-Data-Date- [tên tùy chọn] = value..... Phương pháp.Cú pháp-$ (bộ chọn) .DatePicker ("Tên phương thức", [Giá trị]);.... Sự kiện.Một số sự kiện là - .... Conclusion.. Làm thế nào để bạn sử dụng một trình chọn phạm vi ngày mới?
Thêm DaterangePicker vào ứng dụng Thêm phần tử đầu vào HTML với thuộc tính ID làm phần tử cho DaterangePicker vào chỉ mục của bạn.Tệp HTML.Nhập thành phần Daterangepicker vào ứng dụng của bạn.TS và nối nó vào #Lement [src/app/app.Add the HTML input element with an ID attribute as element for DateRangePicker to your index. html file. Import the DateRangePicker component to your app. ts and append it to the #element [src/app/app.
Làm cách nào để thay đổi định dạng DatePicker trong bootstrap?
Để đặt định dạng ngày, chúng ta chỉ cần thêm định dạng của một đối số và sau đó chúng ta sẽ thêm định dạng bắt buộc, được hiển thị trong ví dụ sau: Ví dụ 1: Trong ví dụ này, chúng ta sẽ sử dụng DD-MM-Định dạng Yyyy. | 
