Làm cách nào để thêm bộ chọn ngày trong html?

Datepicker giúp nhập ngày bằng cách chọn ngày từ lịch mà không cần nhập thủ công vào trường nhập. Khi bạn muốn thu thập dữ liệu nhập ngày từ người dùng, việc thêm bộ chọn ngày vào trường nhập liệu có thể mang lại trải nghiệm tốt cho người dùng. Sử dụng plugin jQuery, bạn có thể dễ dàng thêm công cụ ghi ngày tháng vào trường nhập liệu. Có rất nhiều plugin datepicker có sẵn, nhưng jQuery UI Datepicker là một plugin có cấu hình cao để thêm datepicker trên trang web

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách thêm công cụ đếm ngày vào trường nhập liệu bằng giao diện người dùng jQuery. Bằng cách thêm chức năng chọn ngày, tiện ích lịch sẽ mở khi trường nhập liên quan được tập trung hoặc nhấp vào. Người dùng có thể chọn một ngày (ngày, tháng và năm) từ lịch lớp phủ này. Ở đây chúng tôi sẽ cung cấp mã ví dụ của một số chức năng datepicker được sử dụng nhiều nhất

Trình cắm giao diện người dùng jQuery

Đầu tiên, bao gồm các thư viện cần thiết để sử dụng plugin jQuery UI Datepicker

Chức năng cơ bản của Datepicker

Mã ví dụ này thêm một tiện ích con datepicker cơ bản vào trường đầu vào

Mã JavaScript.
ID trường đầu vào (

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

1) cần được chỉ định làm công cụ chọn ngày tháng.

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

Mã HTML.
Trên tiêu điểm của trường nhập liệu, một lịch tương tác sẽ mở ra trong một lớp phủ.

Date: 

Chức năng nâng cao Datepicker

Các ví dụ sau đây là một số tùy chọn cấu hình nâng cao có thể được sử dụng trong jQuery Datepicker

Thay đổi định dạng ngày.
Theo mặc định, bộ đếm ngày sử dụng định dạng MM/DD/YYYY. Sử dụng tùy chọn

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

2 để thay đổi định dạng ngày theo nhu cầu của bạn.

$(function(){
    $("#datepicker").datepicker({
        dateFormat: "yy-mm-dd"
    });
});

Tháng & Năm Chọn tùy chọn.
Theo mặc định, tháng và năm được thay đổi bằng mũi tên trái và phải. Sử dụng tùy chọn

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

3 và

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

4 để hiển thị các menu để thay đổi tháng và năm.

________số 8

Hạn chế phạm vi ngày.
Ban đầu, bạn có thể chọn bất kỳ ngày nào, nhưng bạn có thể hạn chế sử dụng tùy chọn

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

5 và

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

6.

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

1

Bộ đếm ngày với Phạm vi Ngày (Từ Ngày & Đến Ngày)

Ví dụ sau đây cho thấy cách bạn có thể triển khai chức năng chọn phạm vi ngày trong trường nhập biểu mẫu. Mã này cho phép người dùng chọn Từ ngày và Đến ngày, nhưng nó hạn chế người dùng chọn một ngày trước đó là Đến ngày

Mã JavaScript.
Chỉ định ID của trường nhập Từ (

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

7) và Đến (

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

8).

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

4

Mã HTML.
Người dùng có thể chọn bất kỳ ngày nào trên lịch Từ ngày, nhưng chỉ ngày lớn hơn hoặc bằng mới được chọn trên lịch Đến ngày.

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

5

Đệ trình đầu vào Datepicker với PHP

Trong mã ví dụ này, chúng tôi sẽ chỉ cho bạn cách gửi ngày đầu vào và lấy ngày đã chọn từ công cụ chọn ngày bằng PHP

Đầu vào bộ đếm ngày.
Xác định biểu mẫu HTML có thành phần đầu vào để gửi ngày đã chọn.

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

6

Đính kèm datepicker vào trường nhập văn bản bằng jQuery

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

6

Nhận giá trị Ngày bằng PHP.
Truy xuất giá trị ngày từ trường đầu vào bằng phương thức $_POST trong PHP.

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

0

Thêm Bộ chọn Ngày-Giờ vào Trường Nhập bằng jQuery

Sự kết luận

Trong đoạn mã ví dụ này, chúng tôi đã cho bạn thấy các chức năng chọn ngày được sử dụng nhiều nhất. Với mã mẫu của chúng tôi, bạn có thể đáp ứng tất cả các yêu cầu về công cụ chọn ngày cho ứng dụng web của mình. Tuy nhiên, bạn có thể nâng cao chức năng bộ chọn ngày bằng các tùy chọn cấu hình khác nhau, xem tất cả các tùy chọn có sẵn từ đây – Tùy chọn cấu hình bộ chọn ngày của giao diện người dùng jQuery

Bạn có muốn nhận trợ giúp triển khai hay sửa đổi hoặc nâng cao chức năng của tập lệnh này không?