Làm cách nào để đặt ngày trong Bootstrap Datepicker?

Trong bài viết này, tôi sẽ giải thích bằng một ví dụ, cách đặt định dạng ngày dd/MM/yyyy trong Bootstrap DatePicker (Calendar)

Bootstrap DatePicker hỗ trợ nhiều định dạng Ngày và để đặt định dạng ngày dd/MM/yyyy, thuộc tính định dạng cần được đặt

 

 

Đánh dấu HTML và triển khai Bootstrap DatePicker

Đánh dấu HTML sau bao gồm một Hộp văn bản đã được tạo thành Chỉ đọc

Bên trong trình xử lý sự kiện sẵn sàng cho tài liệu jQuery, TextBox đã được áp dụng với plugin Bootstrap DatePicker

Bất kỳ tùy chọn nào cũng có thể được chỉ định làm thuộc tính dữ liệu bằng cách lấy tên tùy chọn, thay thế từng chữ cái viết hoa bằng một chữ cái viết thường tương ứng được thêm vào bởi dấu gạch ngang và thêm vào trước toàn bộ tên bằng

2. Ví dụ, 
3 sẽ trở thành 
4 và 
5 sẽ trở thành 
6

Định dạng một thành phần

$('#dp1').datepicker({
  format: 'mm-dd-yyyy'
});
1

định dạng nội tuyến

phương pháp

MethodArgsType?Mô tả. datepicker(options)Khởi tạo một datepicker. loại bỏXóa bộ đếm ngày. Xóa các sự kiện đính kèm, các đối tượng đính kèm bên trong và các phần tử HTML đã thêm. showHiển thị bộ đếm ngày. ẩnẨn bộ đếm ngày. datestring✖Cập nhật datepicker với giá trị đầu vào hiện tại hoặc ngày đã cho làm đối số. Trong trường hợp thứ hai, đầu vào cũng sẽ được cập nhật. datestring✖Đặt giới hạn ngày mới thấp hơn trên công cụ chọn ngày. Bỏ qua ngày (hoặc cung cấp một giá trị falsey khác) để bỏ đặt giới hạn. datestring✖Đặt giới hạn ngày cao hơn mới trên công cụ chọn ngày. Bỏ qua ngày (hoặc cung cấp một giá trị falsey khác) để bỏ đặt giới hạn. đặt DaysOfWeek Chuỗi ngày bị vô hiệu hóa, mảng✖Đặt các ngày trong tuần sẽ bị vô hiệu hóa. Bỏ qua ngày (hoặc cung cấp giá trị falsey khác) để bỏ đặt ngày bị vô hiệu hóa

Sự kiện

Lớp Datepicker hiển thị một vài sự kiện để thao túng ngày tháng

Sự kiệnMô tảshowĐược kích hoạt ngay lập tức khi bộ chọn ngày được hiển thị. hideĐược kích hoạt ngay lập tức khi bộ chọn ngày bị ẩn. Kích hoạt khi ngày được thay đổi.
$('#dp1').datepicker({
  format: 'mm-dd-yyyy'
});
3changeYearFired khi chế độ xem năm bị thay đổi từ chế độ xem thập kỷ. changeMonthFired khi chế độ xem tháng được thay đổi từ chế độ xem năm

Hỗ trợ bàn phím

Công cụ hẹn hò bao gồm một số điều hướng bàn phím

phím mũi tên lên, xuống, trái, phải

Tự nó, trái/phải sẽ tiến/lùi một ngày, lên/xuống sẽ lùi/tiến một tuần

Với phím shift, lên/trái sẽ lùi một tháng, xuống/phải sẽ tiến một tháng

Với phím ctrl, lên/trái sẽ lùi lại một năm, xuống/phải sẽ tiến lên một năm

Shift+ctrl hoạt động giống như ctrl -- nghĩa là, nó không thay đổi đồng thời cả tháng và năm, chỉ thay đổi năm

thoát khỏi

Phím thoát có thể được sử dụng để ẩn và hiển thị lại bộ đếm ngày;

đi vào

Khi bộ chọn hiển thị, nhập sẽ chỉ ẩn nó. Khi bộ chọn không hiển thị, nhập sẽ có tác dụng bình thường -- gửi biểu mẫu hiện tại, v.v.

I18N

Plugin hỗ trợ i18n cho tên tháng và ngày trong tuần và tùy chọn

7. Mặc định là tiếng Anh ('en'); . Để thêm nhiều ngôn ngữ hơn, chỉ cần thêm một khóa vào 
9 , trước khi gọi 
10. Ví dụ

$('#dp1').datepicker({
  format: 'mm-dd-yyyy'
});
4

Nếu trình duyệt của bạn (hoặc của những người dùng của bạn) hiển thị sai ký tự, rất có thể trình duyệt đang tải tệp javascript bằng mã hóa không phải unicode. Chỉ cần thêm

11 vào thẻ 
12 của bạn

$('#dp1').datepicker({
  format: 'mm-dd-yyyy'
});
6

Hộp cát αlpha

Sử dụng mẫu dưới đây để điều chỉnh các tùy chọn;

Khi bạn thay đổi tùy chọn, thanh địa chỉ của bạn sẽ cập nhật để phản ánh cấu hình hiện tại (yêu cầu trình duyệt có hỗ trợ

13). Bạn có thể sử dụng url này để liên kết đến hộp cát với cấu hình đã cho được tải sẵn

Một khung CSS html có thể được mô tả là Bootstrap. Sử dụng điều này, người dùng có thể tạo ra một thiết kế có trách nhiệm hơn. Đôi khi dự án của chúng tôi yêu cầu tùy chọn chọn ngày. Theo mặc định, giá trị nội bộ của ngày vẫn còn cho đến ngày hôm nay. Khi mở lịch bằng datepicker, thay vì mở như hiện nay, nó sẽ mở theo defaultViewDate. Tiện ích công cụ hẹn hò linh hoạt được cung cấp bởi công cụ hẹn hò Bootstrap theo kiểu bootstrap của Twitter

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. Plugin datepicker của bootstrap sử dụng jQuery, giúp thêm Datepicker ở dạng input element. Một giải pháp tức thời được cung cấp bởi Bootstrap datepicker để thêm cửa sổ bật lên datepicker trong trường biểu mẫu của trang web để chọn ngày

Trong chương trình của chúng tôi, nếu chúng tôi yêu cầu công cụ chọn ngày với định dạng ngày của chúng tôi như dd/mm/yyyy, yyyy-mm-dd, dd/mm/yyyy, dd-mm-yyyy, v.v., chúng tôi sẽ rất dễ dàng thực hiện điều này. Để đặt định dạng ngày tháng, 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, như minh họa trong ví dụ sau

Làm cách nào để đặt ngày trong bộ chọn ngày bootstrap?

Các tùy chọn được chuyển đến hàm datepicker thông qua hàm băm tùy chọn khi khởi tạo. .
công cụ hẹn hò ({ định dạng. 'mm/dd/yyyy', ngày bắt đầu. '-3d' });
công cụ hẹn hò ({ startDate. '-3d' });
$. fn. bảng chọn ngày. mặc định. định dạng = "mm/dd/yyyy"; . bảng chọn ngày')

Làm cách nào để thay đổi định dạng ngày trong bootstrap datepicker?

Chuyển đến dòng 1399 và tìm định dạng. 'mm/dd/yyyy' . Bây giờ bạn có thể thay đổi định dạng ngày tại đây.

Làm cách nào để đặt giá trị ngày trong datepicker?

Phương thức setDate() của jQuery UI datepicker được sử dụng để đặt ngày từ trường ngày. .
cú pháp. $( ". bộ chọn" ). công cụ hẹn hò( "setDate")
Giá trị trả về. Phương thức này trả về ngày
Tiếp cận. Đầu tiên, thêm tập lệnh di động jQuery cần thiết cho dự án của bạn. .
ví dụ 1. .
đầu ra

Làm cách nào để đặt ngày mặc định trong datepicker?

Cú pháp. $(". bộ chọn"). datepicker( {defaultDate. "+6"} );