Làm cách nào để sử dụng Datepicker trong HTML?

Datepicker trong jQuery UI cho phép người dùng nhập ngày dễ dàng và trực quan. Bạn có thể tùy chỉnh định dạng ngày và ngôn ngữ, giới hạn phạm vi ngày có thể chọn và thêm vào các nút cũng như các tùy chọn điều hướng khác một cách dễ dàng

jQueryUI cung cấp phương thức datepicker() để tạo datepicker và thay đổi giao diện của các phần tử HTML trên một trang bằng cách thêm các lớp CSS mới. Biến đổi ,

trong tập hợp được bao bọc thành một điều khiển bộ chọn ngày.

Theo mặc định, đối với các phần tử, lịch trình chọn ngày sẽ mở trong một lớp phủ nhỏ khi trường văn bản được liên kết đạt được tiêu điểm. Đối với lịch nội tuyến, chỉ cần đính kèm bộ ghi ngày tháng vào một

hoặc .

cú pháp

Phương thức datepicker() có thể được sử dụng ở hai dạng -

$ (bộ chọn, ngữ cảnh). datepicker (tùy chọn) Phương pháp

Phương thức datepicker (options) tuyên bố rằng một phần tử (hoặc

hoặc , tùy thuộc vào cách bạn chọn hiển thị lịch) nên được quản lý dưới dạng công cụ chọn ngày. Tham số tùy chọn là một đối tượng chỉ định hành vi và hình thức của các phần tử bộ đếm ngày.

cú pháp

$(selector, context).datepicker(options);

Bạn có thể cung cấp một hoặc nhiều tùy chọn cùng một lúc bằng cách sử dụng đối tượng Javascript. Nếu có nhiều tùy chọn được cung cấp thì bạn sẽ phân tách chúng bằng dấu phẩy như sau –

$(selector, context).datepicker({option1: value1, option2: value2.... });

Bảng sau liệt kê các tùy chọn khác nhau có thể được sử dụng với phương thức này –

Sr. Không. Tùy chọn và Mô tả

Tùy chọn này chỉ định bộ chọn jQuery cho một trường cũng được cập nhật với bất kỳ lựa chọn ngày nào. Tùy chọn altFormat có thể được sử dụng để đặt định dạng cho giá trị này. Điều này khá hữu ích để đặt các giá trị ngày thành một yếu tố đầu vào ẩn để gửi tới máy chủ, đồng thời hiển thị định dạng thân thiện hơn với người dùng. Theo mặc định, giá trị của nó là ""

Tùy chọn - altField

Tùy chọn này chỉ định bộ chọn jQuery cho một trường cũng được cập nhật với bất kỳ lựa chọn ngày nào. Tùy chọn altFormat có thể được sử dụng để đặt định dạng cho giá trị này. Điều này khá hữu ích để đặt các giá trị ngày thành một yếu tố đầu vào ẩn để gửi tới máy chủ, đồng thời hiển thị định dạng thân thiện hơn với người dùng. Theo mặc định, giá trị của nó là ""

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);

2

Tùy chọn này được sử dụng khi tùy chọn altField được chỉ định. Nó cung cấp định dạng cho giá trị được ghi vào phần tử thay thế. Theo mặc định, giá trị của nó là ""

Tùy chọn - altFormat

Tùy chọn này được sử dụng khi tùy chọn altField được chỉ định. Nó cung cấp định dạng cho giá trị được ghi vào phần tử thay thế. Theo mặc định, giá trị của nó là ""

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);

3

Tùy chọn này là một giá trị Chuỗi được đặt sau phần tử, nhằm hiển thị hướng dẫn cho người dùng. Theo mặc định, giá trị của nó là ""

Tùy chọn - appendText

Tùy chọn này là một giá trị Chuỗi được đặt sau phần tử, nhằm hiển thị hướng dẫn cho người dùng. Theo mặc định, giá trị của nó là ""

cú pháp

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);

4

Tùy chọn này khi được đặt thành true sẽ thay đổi kích thước phần tử để phù hợp với định dạng ngày của bộ đếm ngày như được đặt với tùy chọn dateFormat. Theo mặc định, giá trị của nó là sai

Tùy chọn - autoSize

Tùy chọn này khi được đặt thành true sẽ thay đổi kích thước phần tử để phù hợp với định dạng ngày của bộ đếm ngày như được đặt với tùy chọn dateFormat. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { autoSize: true }
);

5

Tùy chọn này là một hàm gọi lại được gọi ngay trước khi bộ đếm ngày tháng được hiển thị, với phần tử và đối tượng bộ đếm ngày tháng được truyền dưới dạng tham số. Hàm này có thể trả về một hàm băm tùy chọn được sử dụng để sửa đổi bộ đếm ngày. Theo mặc định, giá trị của nó là ""

Tùy chọn - beforeShow

Tùy chọn này là một hàm gọi lại được gọi ngay trước khi bộ đếm ngày tháng được hiển thị, với phần tử và đối tượng bộ đếm ngày tháng được truyền dưới dạng tham số. Hàm này có thể trả về một hàm băm tùy chọn được sử dụng để sửa đổi bộ đếm ngày. Theo mặc định, giá trị của nó là ""

6

Tùy chọn này là một hàm gọi lại lấy ngày làm tham số, được gọi cho mỗi ngày trong bộ chọn ngày ngay trước khi nó được hiển thị, với ngày được chuyển làm tham số duy nhất. Điều này có thể được sử dụng để ghi đè lên một số hành vi mặc định của các yếu tố ngày. Hàm này phải trả về một mảng ba phần tử. Theo mặc định, giá trị của nó là null

Tùy chọn - trướcShowDay

Tùy chọn này là một hàm gọi lại lấy ngày làm tham số, được gọi cho mỗi ngày trong bộ chọn ngày ngay trước khi nó được hiển thị, với ngày được chuyển làm tham số duy nhất. Điều này có thể được sử dụng để ghi đè lên một số hành vi mặc định của các yếu tố ngày. Hàm này phải trả về một mảng ba phần tử, như sau -

  • [0]—true để có thể chọn ngày, ngược lại là false

  • [1]—Một chuỗi tên lớp CSS được phân tách bằng dấu cách sẽ được áp dụng hoặc một chuỗi trống để không áp dụng

  • [2]—Một chuỗi tùy chọn để áp dụng chú giải công cụ cho phần tử ngày

Theo mặc định, giá trị của nó là null

7

Tùy chọn này chỉ định đường dẫn đến hình ảnh sẽ được hiển thị trên nút được bật bằng cách đặt tùy chọn showOn thành một trong các nút hoặc cả hai. Nếu buttonText cũng được cung cấp, văn bản nút sẽ trở thành thuộc tính thay thế của nút. Theo mặc định, giá trị của nó là ""

Tùy chọn - buttonImage

Tùy chọn này chỉ định đường dẫn đến hình ảnh sẽ được hiển thị trên nút được bật bằng cách đặt tùy chọn showOn thành một trong các nút hoặc cả hai. Nếu buttonText cũng được cung cấp, văn bản nút sẽ trở thành thuộc tính thay thế của nút. Theo mặc định, giá trị của nó là ""

cú pháp

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);

8

Tùy chọn này nếu được đặt thành true, chỉ định rằng hình ảnh được chỉ định bởi buttonImage sẽ xuất hiện độc lập (không phải trên nút). Tùy chọn showOn vẫn phải được đặt thành một trong các nút hoặc cả hai để hình ảnh xuất hiện. Theo mặc định, giá trị của nó là sai

Tùy chọn - buttonImageOnly

Tùy chọn này nếu được đặt thành true, chỉ định rằng hình ảnh được chỉ định bởi buttonImage sẽ xuất hiện độc lập (không phải trên nút). Tùy chọn showOn vẫn phải được đặt thành một trong các nút hoặc cả hai để hình ảnh xuất hiện. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { buttonImageOnly: true }
);

9

Tùy chọn này chỉ định chú thích cho nút được bật bằng cách đặt tùy chọn showOn thành một trong các nút hoặc cả hai. Theo mặc định, giá trị của nó là ". "

Tùy chọn - buttonText

Tùy chọn này chỉ định chú thích cho nút được bật bằng cách đặt tùy chọn showOn thành một trong các nút hoặc cả hai. Theo mặc định, giá trị của nó là ". "

cú pháp

________số 8_______

10

Tùy chọn này là một hàm tùy chỉnh để tính toán và trả về số tuần cho một ngày được truyền dưới dạng tham số duy nhất. Việc triển khai mặc định được cung cấp bởi $. bảng chọn ngày. hàm tiện ích iso8601Week()

Tùy chọn - tínhTuần

Tùy chọn này là một hàm tùy chỉnh để tính toán và trả về số tuần cho một ngày được truyền dưới dạng tham số duy nhất. Việc triển khai mặc định được cung cấp bởi $. bảng chọn ngày. hàm tiện ích iso8601Week()

cú pháp

$(".selector").datepicker(
   { calculateWeek: myWeekCalc }
);

11

Tùy chọn này nếu được đặt thành true, danh sách tháng thả xuống sẽ hiển thị, cho phép người dùng trực tiếp thay đổi tháng mà không cần sử dụng các nút mũi tên để duyệt qua chúng. Theo mặc định, giá trị của nó là sai

Tùy chọn - thay đổiTháng

Tùy chọn này nếu được đặt thành true, danh sách tháng thả xuống sẽ hiển thị, cho phép người dùng trực tiếp thay đổi tháng mà không cần sử dụng các nút mũi tên để duyệt qua chúng. Theo mặc định, giá trị của nó là sai

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
0

12

Tùy chọn này nếu được đặt thành true, menu thả xuống năm sẽ hiển thị, cho phép người dùng trực tiếp thay đổi năm mà không cần sử dụng các nút mũi tên để duyệt qua chúng. Tùy chọn yearRange có thể được sử dụng để kiểm soát những năm nào có sẵn để lựa chọn. Theo mặc định, giá trị của nó là sai

Tùy chọn - năm thay đổi

Tùy chọn này nếu được đặt thành true, menu thả xuống năm sẽ hiển thị, cho phép người dùng trực tiếp thay đổi năm mà không cần sử dụng các nút mũi tên để duyệt qua chúng. Tùy chọn yearRange có thể được sử dụng để kiểm soát những năm nào có sẵn để lựa chọn. Theo mặc định, giá trị của nó là sai

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
1

13

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Done for the close button. Nó được sử dụng khi bảng nút được hiển thị thông qua tùy chọn showButtonPanel. Theo mặc định, giá trị của nó là "Xong"

Tùy chọn - closeText

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Done for the close button. Nó được sử dụng khi bảng nút được hiển thị thông qua tùy chọn showButtonPanel. Theo mặc định, giá trị của nó là "Xong"

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
2

14

Tùy chọn này nếu được đặt đúng (mặc định), mục nhập văn bản vào phần tử bị hạn chế đối với các ký tự được tùy chọn định dạng ngày hiện tại cho phép. Theo mặc định, giá trị của nó là true

Tùy chọn - ràng buộcInput

Tùy chọn này nếu được đặt đúng (mặc định), mục nhập văn bản vào phần tử bị hạn chế đối với các ký tự được tùy chọn định dạng ngày hiện tại cho phép. Theo mặc định, giá trị của nó là true

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
3

15

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Hôm nay cho nút hiện tại. Điều này được sử dụng nếu bảng nút được hiển thị thông qua tùy chọn showButtonPanel. Theo mặc định, giá trị của nó là Hôm nay

Tùy chọn - văn bản hiện tại

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Hôm nay cho nút hiện tại. Điều này được sử dụng nếu bảng nút được hiển thị thông qua tùy chọn showButtonPanel. Theo mặc định, giá trị của nó là Hôm nay

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
4

16

Tùy chọn này chỉ định định dạng ngày sẽ được sử dụng. Theo mặc định, giá trị của nó là mm/dd/yy

17

Tùy chọn này là một mảng 7 phần tử cung cấp tên ngày đầy đủ với phần tử thứ 0 đại diện cho Chủ nhật. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy" ]

Tùy chọn - dayNames

Tùy chọn này là một mảng 7 phần tử cung cấp tên ngày đầy đủ với phần tử thứ 0 đại diện cho Chủ nhật. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Chủ Nhật", "Thứ Hai", "Thứ Ba", "Thứ Tư", "Thứ Năm", "Thứ Sáu", "Thứ Bảy" ]

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
5

18

Tùy chọn này là một mảng 7 phần tử cung cấp tên ngày tối thiểu với phần tử thứ 0 đại diện cho Chủ nhật, được sử dụng làm tiêu đề cột. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

Tùy chọn - dayNamesMin

Tùy chọn này là một mảng 7 phần tử cung cấp tên ngày tối thiểu với phần tử thứ 0 đại diện cho Chủ nhật, được sử dụng làm tiêu đề cột. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Su", "Mo", "Tu", "We", "Th", "Fr", "Sa" ]

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
6

19

Tùy chọn này chỉ định mảng 7 phần tử cung cấp tên ngày ngắn với phần tử thứ 0 đại diện cho Chủ nhật. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]

Tùy chọn - dayNamesShort

Tùy chọn này chỉ định mảng 7 phần tử cung cấp tên ngày ngắn với phần tử thứ 0 đại diện cho Chủ nhật. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ]

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
7

20

Tùy chọn này đặt ngày ban đầu cho điều khiển, ghi đè giá trị mặc định của ngày hôm nay, nếu phần tử không có giá trị. Đây có thể là một phiên bản Ngày, số ngày kể từ hôm nay hoặc một chuỗi chỉ định một ngày tuyệt đối hoặc tương đối. Theo mặc định, giá trị của nó là null

21

Tùy chọn này chỉ định tốc độ của hoạt ảnh làm cho bộ đếm ngày xuất hiện. Có thể là một trong các tốc độ chậm, bình thường hoặc nhanh hoặc số mili giây để hoạt ảnh kéo dài. Theo mặc định, giá trị của nó là bình thường

Tùy chọn - thời lượng

Tùy chọn này chỉ định tốc độ của hoạt ảnh làm cho bộ đếm ngày xuất hiện. Có thể là một trong các tốc độ chậm, bình thường hoặc nhanh hoặc số mili giây để hoạt ảnh kéo dài. Theo mặc định, giá trị của nó là bình thường

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
8

22

Tùy chọn này chỉ định ngày nào được coi là ngày đầu tuần và sẽ được hiển thị ở cột ngoài cùng bên trái. Theo mặc định, giá trị của nó là 0

Tùy chọn - Ngày đầu tiên

Tùy chọn này chỉ định ngày nào được coi là ngày đầu tuần và sẽ được hiển thị ở cột ngoài cùng bên trái. Theo mặc định, giá trị của nó là 0

cú pháp

$(selector, context).datepicker({option1: value1, option2: value2.... });
9

23

Tùy chọn này khi được đặt thành true, liên kết ngày hiện tại được đặt thành ngày đã chọn, ghi đè mặc định của ngày hôm nay. Theo mặc định, giá trị của nó là sai

Tùy chọn - gotoCản

Tùy chọn này khi được đặt thành true, liên kết ngày hiện tại được đặt thành ngày đã chọn, ghi đè mặc định của ngày hôm nay. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
0

24

Tùy chọn này nếu được đặt thành true, sẽ ẩn các liên kết tiếp theo và trước đó (trái ngược với việc chỉ vô hiệu hóa chúng) khi chúng không được áp dụng, như được xác định bởi cài đặt của tùy chọn minDate và maxDate. Theo mặc định, giá trị của nó là sai

Tùy chọn - hideIfNoPrevNext

Tùy chọn này nếu được đặt thành true, sẽ ẩn các liên kết tiếp theo và trước đó (trái ngược với việc chỉ vô hiệu hóa chúng) khi chúng không được áp dụng, như được xác định bởi cài đặt của tùy chọn minDate và maxDate. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
1

25

Tùy chọn này khi được đặt thành true, chỉ định bản địa hóa là ngôn ngữ viết từ phải sang trái. Theo mặc định, giá trị của nó là sai

Tùy chọn - isRTL

Tùy chọn này khi được đặt thành true, chỉ định bản địa hóa là ngôn ngữ viết từ phải sang trái. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
2

26

Tùy chọn này đặt ngày tối đa có thể chọn cho điều khiển. Đây có thể là một phiên bản Ngày, số ngày kể từ hôm nay hoặc một chuỗi chỉ định một ngày tuyệt đối hoặc tương đối. Theo mặc định, giá trị của nó là null

27

Tùy chọn này đặt ngày tối thiểu có thể chọn cho điều khiển. Đây có thể là một phiên bản Ngày, số ngày kể từ hôm nay hoặc một chuỗi chỉ định một ngày tuyệt đối hoặc tương đối. Theo mặc định, giá trị của nó là null

28

Tùy chọn này là một mảng 12 phần tử cung cấp tên đầy đủ của tháng với phần tử thứ 0 đại diện cho tháng 1. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Tháng Giêng", "Tháng Hai", "Tháng Ba", "Tháng Tư", "Tháng Năm", "Tháng Sáu", "Tháng Bảy", "Tháng Tám", "Tháng Chín", "Tháng Mười", "Tháng Mười Một",

Tùy chọn - tên tháng

Tùy chọn này là một mảng 12 phần tử cung cấp tên đầy đủ của tháng với phần tử thứ 0 đại diện cho tháng 1. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Tháng Giêng", "Tháng Hai", "Tháng Ba", "Tháng Tư", "Tháng Năm", "Tháng Sáu", "Tháng Bảy", "Tháng Tám", "Tháng Chín", "Tháng Mười", "Tháng Mười Một",

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
3

29

Tùy chọn này chỉ định mảng 12 phần tử cung cấp tên tháng ngắn với phần tử thứ 0 đại diện cho tháng 1. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",

Tùy chọn - monthNamesShort

Tùy chọn này chỉ định mảng 12 phần tử cung cấp tên tháng ngắn với phần tử thứ 0 đại diện cho tháng 1. Có thể được sử dụng để bản địa hóa điều khiển. Theo mặc định, giá trị của nó là [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov",

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
4

30

Tùy chọn này nếu được đặt thành true, các liên kết điều hướng cho nextText, prevText và currentText được chuyển qua $. bảng chọn ngày. formatDate() trước khi hiển thị. Điều này cho phép các định dạng ngày được cung cấp cho những tùy chọn được thay thế bằng các giá trị có liên quan. Theo mặc định, giá trị của nó là sai

31

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Tiếp theo cho liên kết điều hướng tháng tiếp theo. ThemeRoller thay thế văn bản này bằng một biểu tượng. Theo mặc định, giá trị của nó là Tiếp theo

Tùy chọn - nextText

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Tiếp theo cho liên kết điều hướng tháng tiếp theo. ThemeRoller thay thế văn bản này bằng một biểu tượng. Theo mặc định, giá trị của nó là Tiếp theo

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
5

32

Tùy chọn này chỉ định số tháng sẽ hiển thị trong bộ đếm ngày. Theo mặc định, giá trị của nó là 1

Tùy chọn - numberOfMonths

Tùy chọn này chỉ định số tháng sẽ hiển thị trong bộ đếm ngày. Theo mặc định, giá trị của nó là 1. Nhiều loại được hỗ trợ –

  • Số - Số tháng để hiển thị trong một hàng

  • Mảng - Một mảng xác định số lượng hàng và cột sẽ hiển thị

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
6

33

Tùy chọn này là một lệnh gọi lại được gọi khi công cụ chọn ngày tháng chuyển sang một tháng hoặc năm mới, với năm, tháng (dựa trên 1) và phiên bản công cụ chọn ngày đã chọn được truyền dưới dạng tham số và ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

Tùy chọn - onChangeMonthYear

Tùy chọn này là một lệnh gọi lại được gọi khi công cụ chọn ngày tháng chuyển sang một tháng hoặc năm mới, với năm, tháng (dựa trên 1) và phiên bản công cụ chọn ngày đã chọn được truyền dưới dạng tham số và ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

34

Tùy chọn này là một lệnh gọi lại được gọi bất cứ khi nào đóng bộ chọn ngày, chuyển ngày đã chọn dưới dạng văn bản (chuỗi trống nếu không có lựa chọn) và phiên bản bộ chọn ngày cũng như ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

Tùy chọn - onClose

Tùy chọn này là một lệnh gọi lại được gọi bất cứ khi nào đóng bộ chọn ngày, chuyển ngày đã chọn dưới dạng văn bản (chuỗi trống nếu không có lựa chọn) và phiên bản bộ chọn ngày cũng như ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

35

Tùy chọn này là một cuộc gọi lại được gọi bất cứ khi nào một ngày được chọn, chuyển ngày đã chọn dưới dạng văn bản (chuỗi trống nếu không có lựa chọn nào) và phiên bản bộ chọn ngày và ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

Tùy chọn - onSelect

Tùy chọn này là một cuộc gọi lại được gọi bất cứ khi nào một ngày được chọn, chuyển ngày đã chọn dưới dạng văn bản (chuỗi trống nếu không có lựa chọn nào) và phiên bản bộ chọn ngày và ngữ cảnh hàm được đặt thành phần tử trường đầu vào. Theo mặc định, giá trị của nó là null

36

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Trước cho liên kết điều hướng tháng trước. (Lưu ý rằng ThemeRoller thay thế văn bản này bằng một biểu tượng). Theo mặc định, giá trị của nó là PrevdefaultDatedayNamesMin

Tùy chọn - văn bản trước

Tùy chọn này chỉ định văn bản để thay thế chú thích mặc định của Trước cho liên kết điều hướng tháng trước. (Lưu ý rằng ThemeRoller thay thế văn bản này bằng một biểu tượng). Theo mặc định, giá trị của nó là Prev

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
7

37

Tùy chọn này nếu được đặt thành true, có thể chọn các ngày hiển thị trước hoặc sau (các) tháng được hiển thị. Những ngày như vậy không được hiển thị trừ khi tùy chọn showOtherMonths là đúng. Theo mặc định, giá trị của nó là sai

Tùy chọn - chọnOtherMonths

Tùy chọn này nếu được đặt thành true, có thể chọn các ngày hiển thị trước hoặc sau (các) tháng được hiển thị. Những ngày như vậy không được hiển thị trừ khi tùy chọn showOtherMonths là đúng. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
8

38

Tùy chọn này nếu là số, chỉ định giá trị từ 0 đến 99 năm trước đó mọi giá trị năm có 2 chữ số sẽ được coi là thuộc về thế kỷ trước. Nếu tùy chọn này là một chuỗi, giá trị sẽ trải qua quá trình chuyển đổi số và được thêm vào năm hiện tại. Mặc định là +10 đại diện cho 10 năm kể từ năm hiện tại

Tùy chọn - shortYearCutoff

Tùy chọn này nếu là số, chỉ định giá trị từ 0 đến 99 năm trước đó mọi giá trị năm có 2 chữ số sẽ được coi là thuộc về thế kỷ trước. Nếu tùy chọn này là một chuỗi, giá trị sẽ trải qua quá trình chuyển đổi số và được thêm vào năm hiện tại. Mặc định là +10 đại diện cho 10 năm kể từ năm hiện tại

cú pháp

$(".selector").datepicker(
   { altField: "#actualDate" }
);
9

39

Tùy chọn này chỉ định đặt tên của hoạt ảnh sẽ được sử dụng để hiển thị và ẩn bộ đếm ngày. Nếu được chỉ định, phải là một trong các hoạt ảnh hiển thị (mặc định), fadeIn, slideDown hoặc bất kỳ giao diện người dùng jQuery nào hiển thị/ẩn. Theo mặc định, giá trị của nó được hiển thị

Tùy chọn - showAnim

Tùy chọn này chỉ định đặt tên của hoạt ảnh sẽ được sử dụng để hiển thị và ẩn bộ đếm ngày. Nếu được chỉ định, phải là một trong các hoạt ảnh hiển thị (mặc định), fadeIn, slideDown hoặc bất kỳ giao diện người dùng jQuery nào hiển thị/ẩn. Theo mặc định, giá trị của nó được hiển thị

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
0

40

Tùy chọn này nếu được đặt thành true, bảng điều khiển nút ở cuối bộ đếm ngày sẽ hiển thị, chứa các nút hiện tại và nút đóng. Chú thích của các nút này có thể được cung cấp thông qua các tùy chọn currentText và closeText. Theo mặc định, giá trị của nó là sai

Tùy chọn - showButtonPanel

Tùy chọn này nếu được đặt thành true, bảng điều khiển nút ở cuối bộ đếm ngày sẽ hiển thị, chứa các nút hiện tại và nút đóng. Chú thích của các nút này có thể được cung cấp thông qua các tùy chọn currentText và closeText. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
1

41

Tùy chọn này chỉ định chỉ mục dựa trên 0, bắt đầu từ phía trên bên trái, trong đó tháng chứa ngày hiện tại sẽ được đặt trong màn hình nhiều tháng. Theo mặc định, giá trị của nó là 0

Tùy chọn - showCienAtPos

Tùy chọn này chỉ định chỉ mục dựa trên 0, bắt đầu từ phía trên bên trái, trong đó tháng chứa ngày hiện tại sẽ được đặt trong màn hình nhiều tháng. Theo mặc định, giá trị của nó là 0

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
2

42

Tùy chọn này chỉ định nếu được đặt thành true, vị trí của tháng và năm sẽ bị đảo ngược trong tiêu đề của bộ đếm ngày. Theo mặc định, giá trị của nó là sai

Tùy chọn - hiển thịThángSauNăm

Tùy chọn này chỉ định nếu được đặt thành true, vị trí của tháng và năm sẽ bị đảo ngược trong tiêu đề của bộ đếm ngày. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
3

43

Tùy chọn này chỉ định thời điểm bộ đếm ngày sẽ xuất hiện. Các giá trị có thể là tiêu điểm, nút hoặc cả hai. Theo mặc định, giá trị của nó là tiêu điểm

Tùy chọn - showOn

Tùy chọn này chỉ định thời điểm bộ đếm ngày sẽ xuất hiện. Các giá trị có thể là tiêu điểm, nút hoặc cả hai. Theo mặc định, giá trị của nó là tiêu điểm

tiêu điểm (mặc định) làm cho bộ đếm ngày hiển thị khi phần tử lấy tiêu điểm

nút làm cho một nút được tạo sau phần tử (nhưng trước bất kỳ văn bản được nối thêm nào) kích hoạt bộ đếm ngày khi được nhấp

cả hai đều làm cho nút kích hoạt được tạo và để các sự kiện tiêu điểm cũng kích hoạt bộ đếm ngày

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
4

44

Tùy chọn này cung cấp một hàm băm để chuyển vào hoạt ảnh khi hoạt ảnh giao diện người dùng jQuery được chỉ định cho tùy chọn showAnim. Theo mặc định, giá trị của nó là {}

Tùy chọn - showOptions

Tùy chọn này cung cấp một hàm băm để chuyển vào hoạt ảnh khi hoạt ảnh giao diện người dùng jQuery được chỉ định cho tùy chọn showAnim. Theo mặc định, giá trị của nó là {}

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
5

45

Tùy chọn này nếu được đặt thành true, các ngày trước hoặc sau ngày đầu tiên và ngày cuối cùng của tháng hiện tại sẽ được hiển thị. Không thể chọn những ngày này trừ khi tùy chọn selectOtherMonths cũng được đặt thành đúng. Theo mặc định, giá trị của nó là sai

Tùy chọn - showOtherMonths

Tùy chọn này nếu được đặt thành true, các ngày trước hoặc sau ngày đầu tiên và ngày cuối cùng của tháng hiện tại sẽ được hiển thị. Không thể chọn những ngày này trừ khi tùy chọn selectOtherMonths cũng được đặt thành đúng. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
6

46

Tùy chọn này nếu được đặt thành true, số tuần được hiển thị trong cột bên trái màn hình tháng. Tùy chọn tính toán Tuần có thể được sử dụng để thay đổi cách xác định giá trị này. Theo mặc định, giá trị của nó là sai

Tùy chọn - showWeek

Tùy chọn này nếu được đặt thành true, số tuần được hiển thị trong cột bên trái màn hình tháng. Tùy chọn tính toán Tuần có thể được sử dụng để thay đổi cách xác định giá trị này. Theo mặc định, giá trị của nó là sai

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
7

47

Tùy chọn này chỉ định chỉ định số tháng sẽ di chuyển khi một trong các điều khiển điều hướng tháng được nhấp vào. Theo mặc định, giá trị của nó là 1

Tùy chọn - stepMonths

Tùy chọn này chỉ định chỉ định số tháng sẽ di chuyển khi một trong các điều khiển điều hướng tháng được nhấp vào. Theo mặc định, giá trị của nó là 1

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
8

48

Tùy chọn này chỉ định văn bản sẽ hiển thị cho cột số tuần, ghi đè giá trị mặc định của Wk, khi showWeek là đúng. Theo mặc định, giá trị của nó là Wk

49

Tùy chọn này chỉ định giới hạn về số năm được hiển thị trong danh sách thả xuống ở biểu mẫu từ. đến khi changeYear là đúng. Các giá trị có thể là tuyệt đối hoặc tương đối (ví dụ:. 2005. +2, cho 2005 đến 2 năm kể từ bây giờ). Tiền tố c có thể được sử dụng để bù các giá trị tương đối từ năm đã chọn thay vì năm hiện tại (ví dụ. c-2. c+3). Theo mặc định, giá trị của nó là c-10. c+10

Tùy chọn - phạm vi năm

Tùy chọn này chỉ định giới hạn về số năm được hiển thị trong danh sách thả xuống ở biểu mẫu từ. đến khi changeYear là đúng. Các giá trị có thể là tuyệt đối hoặc tương đối (ví dụ:. 2005. +2, cho 2005 đến 2 năm kể từ bây giờ). Tiền tố c có thể được sử dụng để bù các giá trị tương đối từ năm đã chọn thay vì năm hiện tại (ví dụ. c-2. c+3). Theo mặc định, giá trị của nó là c-10. c+10

cú pháp

$(".selector").datepicker(
   { altFormat: "yy-mm-dd" }
);
9

50

Tùy chọn này hiển thị văn bản bổ sung sau năm trong tiêu đề bộ chọn ngày. Theo mặc định, giá trị của nó là ""

Tùy chọn - nămSuffix

Tùy chọn này hiển thị văn bản bổ sung sau năm trong tiêu đề bộ chọn ngày. Theo mặc định, giá trị của nó là ""

cú pháp

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
0

Phần sau đây sẽ cho bạn thấy một vài ví dụ hoạt động của chức năng datepicker

chức năng mặc định

Ví dụ sau minh họa một ví dụ đơn giản về chức năng datepicker không chuyển tham số nào cho phương thức datepicker()

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
1

Hãy để chúng tôi lưu đoạn mã trên trong một ví dụ về datepicker tệp HTML. htm và mở nó trong trình duyệt tiêu chuẩn hỗ trợ javascript, bạn cũng phải xem đầu ra sau -

Làm cách nào để sử dụng Datepicker trong HTML bằng JavaScript?

Chúng ta có thể đưa tính năng datepicker vào chương trình javascript của mình bằng cách chỉ định bên dưới bên trong thẻ Bên trong phút. css” và bên trong thẻ

Làm cách nào để đặt Datepicker trong trường nhập liệu?

Mã ví dụ này thêm tiện ích công cụ chọn ngày cơ bản vào trường nhập liệu. .
Mã JavaScript. ID trường đầu vào ( datepicker ) cần được chỉ định làm bộ chọn datepicker. .
Thay đổi định dạng ngày. .
Tháng & Năm Chọn Tùy chọn. .
Hạn chế phạm vi ngày. .
Mã JavaScript. .
Nhận giá trị ngày với PHP

Làm cách nào để lấy ngày đã chọn từ Datepicker trong HTML?

Đây là cách lấy đối tượng Date từ datepicker trong sự kiện onSelect. $("#datepickerid"). datepicker({ onSelect. hàm (dateText, inst) { var date_obj = $(this). datepicker('getDate');

Làm cách nào để mã ngày sinh trong HTML?

elements of type="date" create input fields that let the user enter a date, either with a textbox that validates the input or a special date picker interface. The resulting value includes the year, month, and day, but not the time. .
đmmyyyy
đ/tháng/năm
tháng/ngày/năm
dd-mm-yyyy
mm-dd-yyyy
Tháng đ, yyyy