JqueryUI - Người chọn ngày

Công cụ chọn ngày trong jQueryUI cho phép người dùng nhập ngày tháng dễ dàng và trực quan. Bạn có thể tùy chỉnh định dạng ngày và ngôn ngữ, hạn chế phạm vi ngày có thể chọn và thêm 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 datepicker()phương thức tạo trình chọn ngày và thay đổi giao diện của các phần tử HTML trên trang bằng cách thêm các lớp CSS mới. Chuyển đổi các phần tử <input>, <div> và <span> trong tập hợp được bao bọc thành điều khiển bộ chọn ngày.

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

Cú pháp

Các datepicker() phương pháp có thể được sử dụng ở hai dạng:

  • $ (bộ chọn, ngữ cảnh) .datepicker (tùy chọn) Phương thức

  • $ (selector, context) .datepicker ("action", [params]) Phương thức

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

datepicker (tùy chọn) tùy chọn

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 pháp này:

Sr.No. Tùy chọn & Mô tả
1 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. Các altFormat tùy chọn có thể được sử dụng để thiết lập các định dạng cho giá trị này. Điều này khá hữu ích để thiết lập các giá trị ngày thành một phần tử đầu vào ẩn để gửi đến máy chủ, đồng thời hiển thị một đị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à"".

Option - 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. Các altFormat tùy chọn có thể được sử dụng để thiết lập các định dạng cho giá trị này. Điều này khá hữu ích để thiết lập các giá trị ngày thành một phần tử đầu vào ẩn để gửi đến máy chủ, đồng thời hiển thị một đị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à"".

Syntax

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

Tùy chọn này được sử dụng khi một 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à"".

Option - altFormat

Tùy chọn này được sử dụng khi một 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à"".

Syntax

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

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

Option - appendText

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

Syntax

$(".selector").datepicker(
   { appendText: "(yyyy-mm-dd)" }
);
4 kich thươc tự động

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

Option - autoSize

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

Syntax

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

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

Option - beforeShow

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

6 beforeShowDay

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 truyền làm tham số duy nhất. Điều này có thể được sử dụng để ghi đè một số hành vi mặc định của các phần 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.

Option - beforeShowDay

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 truyền làm tham số duy nhất. Điều này có thể được sử dụng để ghi đè một số hành vi mặc định của các phần tử ngày. Hàm này phải trả về một mảng ba phần tử, như sau:

  • [0] - true để 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 buttonImage

Tùy chọn này chỉ định đường dẫn đến hình ảnh đượ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 alt của nút. Theo mặc định, giá trị của nó là"".

Option - buttonImage

Tùy chọn này chỉ định đường dẫn đến hình ảnh đượ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 alt của nút. Theo mặc định, giá trị của nó là"".

Syntax

$(".selector").datepicker(
   { buttonImage: "/images/datepicker.gif" }
);
số 8 buttonImageOnly

Tùy chọn này nếu được đặt thành true , sẽ 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 một 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àfalse.

Option - buttonImageOnly

Tùy chọn này nếu được đặt thành true , sẽ 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 một 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àfalse.

Syntax

$(".selector").datepicker(
   { buttonImageOnly: true }
);
9 nút văn bản

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à"...".

Option - 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à"...".

Syntax

$(".selector").datepicker(
   { buttonText: "Choose" }
);
10 tính toá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 hàm tiện ích $ .datepicker.iso8601Week () .

Option - calculateWeek

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 hàm tiện ích $ .datepicker.iso8601Week () .

Syntax

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

Tùy chọn này nếu được đặt thành true , menu thả xuống thá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 để bước qua chúng. Theo mặc định, giá trị của nó làfalse.

Option - changeMonth

Tùy chọn này nếu được đặt thành true , menu thả xuống thá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 để bước qua chúng. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { changeMonth: true }
);
12 thay đổi

Tùy chọn này nếu được đặt thành true , danh sách 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 để bước qua chúng. Năm tùy chọn thể sử dụng phương pháp để kiểm soát năm nào có sẵn để lựa chọn. Theo mặc định, giá trị của nó làfalse.

Option - changeYear

Tùy chọn này nếu được đặt thành true , danh sách 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 để bước qua chúng. Năm tùy chọn thể sử dụng phương pháp để kiểm soát năm nào có sẵn để lựa chọn. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { changeYear: true }
);
13 closeText

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

Option - closeText

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

Syntax

$(".selector").datepicker(
   { closeText: "Close" }
);
14 constraintinInput

Tùy chọn này nếu thiết lập đúng (mặc định), nhập văn bản vào <input> phần tử được hạn chế để nhân vật được cho phép bởi dòng điện DateFormat tùy chọn. Theo mặc định, giá trị của nó làtrue.

Option - constrainInput

Tùy chọn này nếu thiết lập đúng (mặc định), nhập văn bản vào <input> phần tử được hạn chế để nhân vật được cho phép bởi dòng điện DateFormat tùy chọn. Theo mặc định, giá trị của nó làtrue.

Syntax

$(".selector").datepicker(
   { constrainInput: false }
);
15 currentText

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 điều khiển nút được hiển thị qua tùy chọn showButtonPanel . Theo mặc định, giá trị của nó làToday.

Option - currentText

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 điều khiển nút được hiển thị qua tùy chọn showButtonPanel . Theo mặc định, giá trị của nó làToday.

Syntax

$(".selector").datepicker(
   { currentText: "Now" }
);
16 Định dạng ngày tháng

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.

Option - dateFormat

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.

Syntax

$(".selector").datepicker(
   { dateFormat: "yy-mm-dd" }
);
17 dayNames

Tùy chọn này là một mảng gồm 7 phần tử cung cấp tên đầy đủ của ngà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à[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Option - dayNames

Tùy chọn này là một mảng gồm 7 phần tử cung cấp tên đầy đủ của ngà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à[ "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday" ].

Syntax

$(".selector").datepicker(
   { dayNames: [ "Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag" ] }
);
18 dayNamesMin

Tùy chọn này là một mảng 7 phần tử cung cấp các 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" ].

Option - dayNamesMin

Tùy chọn này là một mảng 7 phần tử cung cấp các 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" ].

Syntax

$(".selector").datepicker(
   { dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ] }
);
19 dayNamesShort

Tùy chọn này chỉ định một 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" ].

Option - dayNamesShort

Tùy chọn này chỉ định một 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" ].

Syntax

$(".selector").datepicker(
   { dayNamesShort: [ "Son", "Mon", "Die", "Mit", "Don", "Fre", "Sam" ] }
);
20 defaultDate

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ử <input> 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.

Option - defaultDate

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ử <input> 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.

Syntax

$(".selector").datepicker(
   { defaultDate: +7 }
);
21 thời hạn

Tùy chọn này chỉ định tốc độ của hoạt ảnh làm cho bộ chọn ngày xuất hiện. Có thể là một trong số 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ànormal.

Option - duration

Tùy chọn này chỉ định tốc độ của hoạt ảnh làm cho bộ chọn ngày xuất hiện. Có thể là một trong số 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ànormal.

Syntax

$(".selector").datepicker(
   { duration: "slow" }
);
22 ngày đầu tiên

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

Option - firstDay

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

Syntax

$(".selector").datepicker(
   { firstDay: 1 }
);
23 gotoCurrent

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àfalse.

Option - gotoCurrent

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àfalse.

Syntax

$(".selector").datepicker(
   { gotoCurrent: true }
);
24 hideIfNoPrevNext

Tùy chọn này nếu thiết lập để thực sự , da các liên kết tiếp theo và trước đó (như trái ngược với chỉ đơn thuần là việc vô hiệu hóa chúng) khi họ không được áp dụng, được xác định bởi các thiết lập của minDatemaxDate tùy chọn. Theo mặc định, giá trị của nó làfalse.

Option - hideIfNoPrevNext

Tùy chọn này nếu thiết lập để thực sự , da các liên kết tiếp theo và trước đó (như trái ngược với chỉ đơn thuần là việc vô hiệu hóa chúng) khi họ không được áp dụng, được xác định bởi các thiết lập của minDatemaxDate tùy chọn. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { hideIfNoPrevNext: true }
);
25 isRTL

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

Option - isRTL

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

Syntax

$(".selector").datepicker(
   { isRTL: true }
);
26 maxDate

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.

Option - maxDate

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.

Syntax

$(".selector").datepicker(
   { maxDate: "+1m +1w" }
);
27 minDate

Tùy chọn này đặt ngày có thể chọn tối thiểu cho việc kiểm soát. Đâ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.

Option - minDate

Tùy chọn này đặt ngày có thể chọn tối thiểu cho việc kiểm soát. Đâ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.

Syntax

$(".selector").datepicker(
   { minDate: new Date(2007, 1 - 1, 1) }
);
28 tháng

Tùy chọn này là một mảng 12 phần tử cung cấp tên tháng đầy đủ với phần tử thứ 0 đại diện cho tháng Giêng. 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à[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Option - monthNames

Tùy chọn này là một mảng 12 phần tử cung cấp tên tháng đầy đủ với phần tử thứ 0 đại diện cho tháng Giêng. 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à[ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ].

Syntax

$(".selector").datepicker(
   { monthNames: [ "janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre" ]  }
);
29 monthNamesShort

Tùy chọn này chỉ định một mảng 12 phần tử cung cấp các tên tháng ngắn với phần tử thứ 0 đại diện cho tháng Giêng. 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", "Dec" ].

Option - monthNamesShort

Tùy chọn này chỉ định một mảng 12 phần tử cung cấp các tên tháng ngắn với phần tử thứ 0 đại diện cho tháng Giêng. 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", "Dec" ].

Syntax

$(".selector").datepicker(
   { monthNamesShort: [ "jan", "fév", "mar", "avr", "mai", "Jui", "Jul", "aoû", "sep", "Oot", "nov", "déc" ] }
);
30 navigationAsDateFormat

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, presTextcurrentText sẽ được chuyển qua hàm $ .datepicker.formatDate () trước khi hiển thị. Điều này cho phép các định dạng ngày tháng được cung cấp cho những tùy chọn được thay thế bằng các giá trị liên quan. Theo mặc định, giá trị của nó làfalse.

Option - navigationAsDateFormat

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, presTextcurrentText sẽ được chuyển qua hàm $ .datepicker.formatDate () trước khi hiển thị. Điều này cho phép các định dạng ngày tháng được cung cấp cho những tùy chọn được thay thế bằng các giá trị liên quan. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { navigationAsDateFormat: true }
);
31 nextText

Tùy chọn này chỉ định văn bản để thay thế phụ đề 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àNext.

Option - nextText

Tùy chọn này chỉ định văn bản để thay thế phụ đề 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àNext.

Syntax

$(".selector").datepicker(
   {  nextText: "Later" }
);
32 numberOfMonths

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

Option - numberOfMonths

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

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

  • Array - Một mảng xác định số hàng và cột để hiển thị.

Syntax

$(".selector").datepicker(
   { numberOfMonths: [ 2, 3 ] }
);
33 onChangeMonthYear

Tùy chọn này là một lệnh gọi lại được gọi khi bộ chọn ngày 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 bộ chọn ngày đã chọn được truyền dưới dạng tham số và bối 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.

Option - onChangeMonthYear

Tùy chọn này là một lệnh gọi lại được gọi khi bộ chọn ngày 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 bộ chọn ngày đã chọn được truyền dưới dạng tham số và bối 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 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 một trình chọn ngày đóng lại, 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), cá thể 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.

Option - 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 một trình chọn ngày đóng lại, 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), cá thể 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.

35 onSelect

Tùy chọn này là một lệnh 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), phiên bản datepicker 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.

Option - onSelect

Tùy chọn này là một lệnh 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), phiên bản datepicker 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 trướcText

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.

Option - prevText

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.

Syntax

$(".selector").datepicker(
   { prevText: "Earlier" }
);
37 selectOtherMonths

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àfalse.

Option - selectOtherMonths

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àfalse.

Syntax

$(".selector").datepicker(
   { selectOtherMonths: true }
);
38 shortYearCutoff

Tùy chọn này nếu là số của nó, chỉ định một giá trị từ 0 đến 99 năm trước đó bất kỳ giá trị năm nào có 2 chữ số sẽ được coi là thuộc thế kỷ trước. Nếu tùy chọn này là một chuỗi, giá trị sẽ trải qua một 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.

Option - shortYearCutoff

Tùy chọn này nếu là số của nó, chỉ định một giá trị từ 0 đến 99 năm trước đó bất kỳ giá trị năm nào có 2 chữ số sẽ được coi là thuộc thế kỷ trước. Nếu tùy chọn này là một chuỗi, giá trị sẽ trải qua một 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.

Syntax

$(".selector").datepicker(
   { shortYearCutoff: 50 }
);
39 showAnim

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

Option - showAnim

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

Syntax

$(".selector").datepicker(
   { showAnim: "fold" }
);
40 showButtonPanel

Tùy chọn này nếu được đặt thành true , một bảng nút ở cuối trình chọn ngày sẽ hiển thị, chứa các nút hiện tại và đó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 currentTextcloseText . Theo mặc định, giá trị của nó làfalse.

Option - showButtonPanel

Tùy chọn này nếu được đặt thành true , một bảng nút ở cuối trình chọn ngày sẽ hiển thị, chứa các nút hiện tại và đó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 currentTextcloseText . Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { showButtonPanel: true }
);
41 showCurrentAtPos

Tùy chọn này chỉ định chỉ mục dựa trên 0, bắt đầu ở phía trên bên trái, nơi mà 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.

Option - showCurrentAtPos

Tùy chọn này chỉ định chỉ mục dựa trên 0, bắt đầu ở phía trên bên trái, nơi mà 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.

Syntax

$(".selector").datepicker(
   { showCurrentAtPos: 3 }
);
42 showMonthAfterYear

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ẽ được đảo ngược trong tiêu đề của trình chọn ngày. Theo mặc định, giá trị của nó làfalse.

Option - showMonthAfterYear

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ẽ được đảo ngược trong tiêu đề của trình chọn ngày. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { showMonthAfterYear: true }
);
43 showOn

Tùy chọn này chỉ định thời điểm trình chọn 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àfocus.

Option - showOn

Tùy chọn này chỉ định thời điểm trình chọn 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àfocus.

focus (mặc định) khiến bộ chọn ngày hiển thị khi phần tử <input> đạt được tiêu điểm.

nút gây ra một nút được tạo ra sau thẻ <input> yếu tố (nhưng trước khi bất kỳ văn bản nối) mà trigger datepicker khi nhấp vào.

cả hai đều khiến nút kích hoạt được tạo và đối với các sự kiện tiêu điểm cũng kích hoạt trình chọn ngày.

Syntax

$(".selector").datepicker(
   { showOn: "both" }
);
44 showOptions

Tùy chọn này cung cấp một hàm băm được chuyển cho 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à{}.

Option - showOptions

Tùy chọn này cung cấp một hàm băm được chuyển cho 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à{}.

Syntax

$(".selector").datepicker(
   { showOptions: { direction: "up" } }
);
45 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 true. Theo mặc định, giá trị của nó làfalse.

Option - 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 true. Theo mặc định, giá trị của nó làfalse.

Syntax

$(".selector").datepicker(
   { showOtherMonths: true }
);
46 showWeek

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

Option - showWeek

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

Syntax

$(".selector").datepicker(
   { showWeek: true }
);
47 stepMonths

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

Option - stepMonths

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

Syntax

$(".selector").datepicker(
   { stepMonths: 3 }
);
48 tuần

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

Option - weekHeader

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

Syntax

$(".selector").datepicker(
   { weekHeader: "W" }
);
49 yearRange

Tùy chọn này chỉ định các giới hạn về số năm được hiển thị trong menu thả xuống dưới dạng : từ: đến khi changeYeartrue . 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ù đắp các giá trị tương đối so với 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.

Option - yearRange

Tùy chọn này chỉ định các giới hạn về số năm được hiển thị trong menu thả xuống dưới dạng : từ: đến khi changeYeartrue . 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ù đắp các giá trị tương đối so với 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.

Syntax

$(".selector").datepicker(
   { yearRange: "2002:2012" }
);
50 yearSuffix

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

Option - yearSuffix

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

Syntax

$(".selector").datepicker(
   { yearSuffix: "CE" }
);

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 trình chọn ngày.

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 trình chọn ngày không truyền tham số nào cho datepicker() phương pháp.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-1" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-1"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Công cụ chọn ngày nội tuyến

Ví dụ sau minh họa một ví dụ đơn giản về chức năng bộ chọn ngày nội tuyến.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-2" ).datepicker();
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      Enter Date: <div id = "datepicker-2"></div>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, chúng tôi sử dụng phần tử <div> để lấy bộ chọn ngày nội dòng.

Sử dụng appendText, dateFormat, altField và altFormat

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) appendText (b) dateFormat (c) altField(d) altFormat trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-3" ).datepicker({
               appendText:"(yy-mm-dd)",
               dateFormat:"yy-mm-dd",
               altField: "#datepicker-4",
               altFormat: "DD, d MM, yy"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-3"></p>
      <p>Alternate Date: <input type = "text" id = "datepicker-4"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, bạn có thể thấy rằng định dạng ngày cho đầu vào đầu tiên được đặt là yy-mm-dd . Nếu bạn chọn một số ngày từ trình chọn ngày thì ngày đó sẽ được phản ánh trong trường nhập thứ hai có định dạng ngày được đặt là "DD, d MM, yy".

Sử dụng beforeShowDay

Ví dụ sau cho thấy việc sử dụng tùy chọn beforeShowDay trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-5" ).datepicker({
               beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
               }
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-5"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, chủ nhật và thứ bảy bị vô hiệu hóa.

Sử dụng showOn, buttonImage và buttonImageOnly

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) showOn (b) buttonImage(c) buttonImageOnly trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-6" ).datepicker({
               showOn:"button",
               buttonImage: "/jqueryui/images/calendar-icon.png",
               buttonImageOnly: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-6"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, một biểu tượng được hiển thị cần phải nhấp để mở trình chọn ngày.

Sử dụng defaultDate, dayNamesMin và thời lượng

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) dayNamesMin (b) dayNamesMin(c) duration trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-7" ).datepicker({
               defaultDate:+9,
               dayNamesMin: [ "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa" ],
               duration: "slow"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-7"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, tên của các ngày được thay đổi bằng dayNamesMin . Bạn cũng có thể thấy một ngày mặc định được đặt.

Sử dụng presText, nextText, showOtherMonths và selectOtherMonths

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) prevText (b) nextText (c) showOtherMonths(d) selectOtherMonths trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      <!-- Javascript -->
      
      <script>
         $(function() { $( "#datepicker-8" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: false
            });
            $( "#datepicker-9" ).datepicker({
               prevText:"click for previous months",
               nextText:"click for next months",
               showOtherMonths:true,
               selectOtherMonths: true
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Start Date: <input type = "text" id = "datepicker-8"></p>
      <p>Enter End Date: <input type = "text" id = "datepicker-9"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, các liên kết trước và liên kết nect có chú thích. Nếu bạn nhấp vào phần tử, trình chọn ngày sẽ mở ra. Bây giờ trong trình chọn ngày đầu tiên, các ngày tháng khác bị vô hiệu hóa vì selectOtherMonths được đặt sai . Trong bộ chọn ngày thứ hai cho loại nhập thứ hai, selectOtherMonths được đặt thành true .

Sử dụng changeMonth, changeYear và numberOfMonths

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) changeMonth (b) changeYear(c) numberOfMonths trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-10" ).datepicker({
               changeMonth:true,
               changeYear:true,
               numberOfMonths:[2,2]
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-10"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, bạn có thể thấy menu thả xuống cho các trường Tháng và Năm. Và chúng ta đang tính chênh lệch 4 tháng trong cấu trúc mảng [2,2].

Sử dụng showWeek, yearSuffix và showAnim

Ví dụ sau đây cho thấy việc sử dụng ba tùy chọn quan trọng (a) showWeek (b) yearSuffix(c) showAnim trong chức năng chọn ngày của JqueryUI.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-11" ).datepicker({
               showWeek:true,
               yearSuffix:"-CE",
               showAnim: "slide"
            });
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-11"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htmvà mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau. Bây giờ, bạn có thể chơi với kết quả -

Trong ví dụ trên, bạn có thể thấy rằng số tuần được hiển thị ở bên trái của datepicker khi showWeek được đặt thành true . Năm có hậu tố là "-CE".

$ (selector, context) .datepicker ("action", [params]) Phương thức

Phương thức datepicker (action, params) có thể thực hiện một hành động trên lịch, chẳng hạn như chọn một ngày mới. Cácaction được chỉ định dưới dạng một chuỗi trong đối số đầu tiên và tùy chọn, một hoặc nhiều params có thể được cung cấp dựa trên hành động đã cho.

Về cơ bản, ở đây các hành động không là gì nhưng chúng là các phương thức jQuery mà chúng ta có thể sử dụng ở dạng chuỗi.

Cú pháp

$(selector, context).datepicker ("action", [params]);

Bảng sau liệt kê các hành động cho phương pháp này:

Sr.No. Mô tả hành động
1 hủy hoại()

Hành động này sẽ xóa hoàn toàn chức năng trình chọn ngày. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - destroy()

Hành động này sẽ xóa hoàn toàn chức năng trình chọn ngày. Thao tác này sẽ đưa phần tử trở lại trạng thái pre-init. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("destroy");
2 hộp thoại (date [, onSelect] [, settings] [, pos])

Hành động này hiển thị trình chọn ngày trong hộp thoại giao diện người dùng jQuery.

Action - dialog( date [, onSelect ] [, settings ] [, pos ] )

Hành động này hiển thị trình chọn ngày trong hộp thoại giao diện người dùng jQuery. Ở đâu -

  • ngàyngày đầu tiên.

  • onSelect là một chức năng gọi lại khi một ngày được chọn. Hàm nhận văn bản ngày và phiên bản bộ chọn ngày dưới dạng tham số.

  • cài đặtcài đặt mới cho bộ chọn ngày.

  • pos là vị trí trên cùng / bên trái của hộp thoại dưới dạng [x, y] hoặc MouseEvent có chứa tọa độ. Nếu không được chỉ định, hộp thoại sẽ được căn giữa trên màn hình.

Syntax

$(".selector").datepicker( "dialog", "10/12/2012" );
3 hẹn gặp()

Hành động này trả về Ngày tương ứng với ngày đã chọn. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - getDate()

Hành động này trả về Ngày tương ứng với ngày đã chọn. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("getDate");
4 ẩn giấu()

Hành động này đóng bộ chọn ngày đã mở trước đó. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - hide()

Hành động này đóng bộ chọn ngày đã mở trước đó. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("hide");
5 bị vô hiệu hóa()

Hành động này kiểm tra xem chức năng của bộ chọn ngày có bị tắt hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - isDisabled()

Hành động này kiểm tra xem chức năng của bộ chọn ngày có bị tắt hay không. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("isDisabled");
6 option (optionName)

Hành động này truy xuất giá trị hiện được liên kết với optionName được chỉ định .

Action - option( optionName )

Hành động này truy xuất giá trị hiện được liên kết với optionName được chỉ định .

Syntax

$(".selector").datepicker( "option", "disabled");
7 Lựa chọn()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn datepicker hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - option()

Hành động này nhận một đối tượng chứa các cặp khóa / giá trị đại diện cho băm tùy chọn datepicker hiện tại. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

var options = $( ".selector" ).datepicker( "option" );
số 8 option (optionName, value)

Hành động này đặt giá trị của tùy chọn datepicker được liên kết với optionName được chỉ định.

Action - option( optionName, value )

Hành động này đặt giá trị của tùy chọn datepicker được liên kết với optionName được chỉ định.

Syntax

$(".selector").datepicker( "option", "disabled", true );
9 option (tùy chọn)

Hành động này đặt một hoặc nhiều tùy chọn cho trình chọn ngày.

Action - option( options )

Hành động này đặt một hoặc nhiều tùy chọn cho trình chọn ngày.

Syntax

$(".selector").datepicker("option", { disabled: true });
10 Làm tươi()

Hành động này sẽ vẽ lại bộ chọn ngày, sau khi đã thực hiện một số sửa đổi bên ngoài. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - refresh()

Hành động này sẽ vẽ lại bộ chọn ngày, sau khi đã thực hiện một số sửa đổi bên ngoài. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("refresh");
11 setDate (ngày tháng)

Hành động này đặt ngày được chỉ định làm ngày hiện tại của người chọn ngày.

Action - setDate()

Hành động này đặt ngày được chỉ định làm ngày hiện tại của người chọn ngày.

Syntax

$(".selector").datepicker("setDate", "10/12/2012");
12 chỉ()

Hành động này sẽ mở bộ chọn ngày. Nếu bộ chọn ngày được đính kèm với một đầu vào, thì đầu vào đó phải hiển thị để bộ chọn ngày được hiển thị. Phương pháp này không chấp nhận bất kỳ đối số nào.

Action - show()

Hành động này sẽ mở bộ chọn ngày. Nếu bộ chọn ngày được đính kèm với một đầu vào, thì đầu vào đó phải hiển thị để bộ chọn ngày được hiển thị. Phương pháp này không chấp nhận bất kỳ đối số nào.

Syntax

$(".selector").datepicker("show");
13 widget ()

Hành động này trả về một đối tượng jQuery có chứa datepicker.

Action - widget()

Hành động này trả về một đối tượng jQuery có chứa datepicker.

Syntax

$(".selector").datepicker("widget");

Các ví dụ sau đây cho thấy việc sử dụng một số hành động được liệt kê trong bảng trên.

Sử dụng hành động setDate ()

Bây giờ chúng ta hãy xem một ví dụ sử dụng các hành động từ bảng trên. Ví dụ sau minh họa việc sử dụng các hành động setDate .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() { $( "#datepicker-12" ).datepicker();
            $( "#datepicker-12" ).datepicker("setDate", "10w+1");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-12"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Sử dụng hành động show ()

Ví dụ sau minh họa việc sử dụng action show .

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Datepicker functionality</title>
      <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
         rel = "stylesheet">
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
      
      <!-- Javascript -->
      <script>
         $(function() {
            $( "#datepicker-13" ).datepicker(); $( "#datepicker-13" ).datepicker("show");
         });
      </script>
   </head>
   
   <body>
      <!-- HTML --> 
      <p>Enter Date: <input type = "text" id = "datepicker-13"></p>
   </body>
</html>

Hãy để chúng tôi lưu đoạn mã trên vào một tệp HTML datepickerexample.htm và mở nó trong một trình duyệt chuẩn hỗ trợ javascript, bạn cũng phải xem kết quả sau:

Quản lý sự kiện trên các yếu tố của trình chọn ngày

Không có phương thức sự kiện trình chọn ngày nào kể từ bây giờ!