Thời gian đầu vào Bootstrap 4

Nó được sử dụng để hiển thị thời gian theo giờ, phút và giây từ menu thả xuống. Trong phần này, chúng ta sẽ tạo một ví dụ để xem cách bộ chọn thời gian được sử dụng trong bootstrap. Thời gian có thể được hiển thị ở nhiều định dạng khác nhau và định dạng được sử dụng thường xuyên nhất là “HH. MM. SS”

hộ

• Đề cập đến giờ
• Có thể nằm từ 1 đến 12 (đối với đồng hồ 12 giờ)

MM

• Đề cập đến biên bản
• Nằm trong khoảng từ 00 đến 59

SS

• Đề cập đến giây
• Nằm trong khoảng từ 00 đến 59

Làm cách nào để triển khai Bộ chọn thời gian?

First, include all the necessary CDNs in the tag: The bootstrap CDN, the CSS CDN and JQuery CDN. The following CDNs must be included:

Next, include the datetimepicker CDN in the tag.

Now, include any Internal CSS you want to include in the

Next, write the main code in the tag, include the time picker component here,

  
  
    
 
  .
.

At the end, we can include the JavaScript required for the timepicker in the   

Ghi chú. Một số phương pháp cũng có thể được sử dụng trong JavaScript trong. chức năng datetimepicker như hiển thị, cập nhật, xóa và ẩn

Các phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5 thuộc loại

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 tạo các trường nhập được thiết kế để cho phép người dùng dễ dàng nhập thời gian (giờ, phút và giây tùy chọn)

Giao diện người dùng của điều khiển khác nhau giữa các trình duyệt; . Trong các trình duyệt không được hỗ trợ, điều khiển xuống cấp một cách nhẹ nhàng thành

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

7

Trong Chrome/Opera, điều khiển

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 rất đơn giản, có các khe để nhập giờ và phút ở định dạng 12 hoặc 24 giờ tùy thuộc vào ngôn ngữ của hệ điều hành và các mũi tên lên và xuống để tăng và giảm thành phần hiện được chọn. Trong một số phiên bản, nút "X" được cung cấp để xóa giá trị của điều khiển

12Giờ

24 giờ

Điều khiển

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 của Firefox rất giống với điều khiển của Chrome, ngoại trừ việc nó không có mũi tên lên và xuống. Nó cũng sử dụng định dạng 12 hoặc 24 giờ để nhập thời gian, dựa trên ngôn ngữ hệ thống. Nút "X" được cung cấp để xóa giá trị của điều khiển

12Giờ

24 giờ

Bộ điều khiển Edge

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 có phần phức tạp hơn, mở ra bộ chọn giờ và phút với các cuộn trượt. Nó, giống như Chrome, sử dụng định dạng 12 hoặc 24 giờ để nhập thời gian, dựa trên ngôn ngữ hệ thống

12Giờ

24 giờ

Một chuỗi đại diện cho một thời gian, hoặc rỗng. Sự kiện

11 và

12Các thuộc tính chung, , và IDL được hỗ trợ

17,

18,

19 và

14. giao diện DOM

71

Phương pháp

72,

73 và

74

Một chuỗi chứa giá trị thời gian được nhập vào đầu vào

Bạn có thể đặt giá trị mặc định cho đầu vào bằng cách thêm thời gian hợp lệ vào thuộc tính khi tạo phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5, như vậy

2

Ví dụ, bạn cũng có thể lấy và đặt giá trị thời gian trong JavaScript bằng thuộc tính

71

17

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

17 của đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 luôn ở định dạng 24 giờ bao gồm các số 0 ở đầu.

81, bất kể định dạng đầu vào là gì, có khả năng được chọn dựa trên ngôn ngữ của người dùng (hoặc bởi tác nhân người dùng). Nếu thời gian bao gồm giây (xem ), định dạng luôn là

82. Bạn có thể tìm hiểu thêm về định dạng của giá trị thời gian được sử dụng bởi loại đầu vào này trong Định dạng ngày và giờ được sử dụng trong HTML

Trong ví dụ này, bạn có thể xem giá trị của đầu vào thời gian bằng cách nhập thời gian và xem nó thay đổi như thế nào sau đó

Đầu tiên, hãy xem HTML. Điều này đủ đơn giản, với nhãn và đầu vào như chúng ta đã thấy trước đây, nhưng với việc thêm phần tử

83 với một

84 để hiển thị giá trị của đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6

1

Mã JavaScript thêm mã vào đầu vào thời gian để theo dõi sự kiện

12, được kích hoạt mỗi khi nội dung của phần tử đầu vào thay đổi. Khi điều này xảy ra, nội dung của

84 được thay thế bằng giá trị mới của phần tử đầu vào

7

Khi một biểu mẫu bao gồm đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 được gửi, giá trị được mã hóa trước khi được đưa vào dữ liệu của biểu mẫu. Mục nhập dữ liệu của biểu mẫu cho đầu vào thời gian sẽ luôn ở dạng

89 hoặc

  
  
    
 
  .
.

90 nếu bao gồm cả giây (xem )

Ngoài các thuộc tính chung cho tất cả các phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5, đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 cung cấp các thuộc tính sau

Ghi chú. Không giống như nhiều loại dữ liệu, giá trị thời gian có miền định kỳ, nghĩa là giá trị đạt đến giá trị cao nhất có thể, sau đó quay lại từ đầu một lần nữa. Ví dụ: chỉ định

  
  
    
 
  .
.

93 của

  
  
    
 
  .
.

94 và

  
  
    
 
  .
.

95 của

  
  
    
 
  .
.

96 có nghĩa là các giá trị thời gian được phép bắt đầu từ 2. 00 PM, chạy qua nửa đêm đến ngày hôm sau, kết thúc lúc 2. 00 giờ sáng. Xem thêm trong phần của bài viết này

Các giá trị của thuộc tính danh sách là

  
  
    
 
  .
.

97 của một phần tử

  
  
    
 
  .
.

98 nằm trong cùng một tài liệu.

  
  
    
 
  .
.

98 cung cấp danh sách các giá trị được xác định trước để đề xuất cho người dùng cho đầu vào này. Bất kỳ giá trị nào trong danh sách không tương thích với không được bao gồm trong các tùy chọn được đề xuất. Các giá trị được cung cấp là đề xuất, không phải yêu cầu. người dùng có thể chọn từ danh sách được xác định trước này hoặc cung cấp một giá trị khác

Một chuỗi cho biết thời gian mới nhất để chấp nhận, được chỉ định giống như mô tả ở trên. Nếu chuỗi đã chỉ định không phải là thời gian hợp lệ, thì không có giá trị tối đa nào được đặt

Một chuỗi chỉ định thời gian sớm nhất để chấp nhận, được đưa ra trong mô tả trước đó. Nếu giá trị được chỉ định không phải là chuỗi thời gian hợp lệ, thì không có giá trị tối thiểu nào được đặt

Thuộc tính Boolean, nếu có, nghĩa là người dùng không thể chỉnh sửa trường này. Tuy nhiên,

17 của nó vẫn có thể được thay đổi bằng mã JavaScript trực tiếp đặt thuộc tính

71

17

Ghi chú. Vì trường chỉ đọc không thể có giá trị, nên

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

24 không có bất kỳ ảnh hưởng nào đối với đầu vào với thuộc tính

15 cũng được chỉ định

Thuộc tính

16 là một số chỉ định mức độ chi tiết mà giá trị phải tuân theo hoặc giá trị đặc biệt

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

27, được mô tả bên dưới. Chỉ các giá trị bằng với cơ sở để bước (nếu được chỉ định, ngược lại và giá trị mặc định phù hợp nếu không có giá trị nào được cung cấp) mới hợp lệ

Giá trị chuỗi của

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

27 có nghĩa là không có bước nào được ngụ ý và mọi giá trị đều được phép (không bao gồm các ràng buộc khác, chẳng hạn như và )

Ghi chú. Khi dữ liệu do người dùng nhập không tuân theo cấu hình từng bước, tác nhân người dùng có thể làm tròn đến giá trị hợp lệ gần nhất, ưu tiên các số theo hướng dương khi có hai tùy chọn gần bằng nhau

Đối với đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6, giá trị của

16 được tính bằng giây, với hệ số tỷ lệ là 1000 (vì giá trị số cơ bản tính bằng mili giây). Giá trị mặc định của

16 là 60, biểu thị 60 giây (hoặc 1 phút hoặc 60.000 mili giây)

Tại thời điểm này, chưa rõ giá trị của

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

27 có nghĩa là gì đối với

16 khi được sử dụng với đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6. Điều này sẽ được cập nhật ngay sau khi thông tin đó được xác định

Cách sử dụng đơn giản nhất của

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 bao gồm tổ hợp phần tử cơ bản

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5 và

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

51, như được thấy bên dưới

8

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 không hỗ trợ các thuộc tính định cỡ biểu mẫu như , vì thời gian luôn có cùng số lượng ký tự. Bạn sẽ phải dùng đến CSS cho nhu cầu định cỡ

Bạn có thể sử dụng thuộc tính để thay đổi lượng thời gian đã nhảy bất cứ khi nào thời gian tăng hoặc giảm (ví dụ: thời gian di chuyển 10 phút mỗi lần khi nhấp vào tiện ích mũi tên nhỏ)

Ghi chú. Thuộc tính này có một số hiệu ứng lạ trên các trình duyệt, vì vậy không hoàn toàn đáng tin cậy

Nó nhận một giá trị số nguyên tương đương với số giây bạn muốn tăng thêm; . Nếu bạn chỉ định giá trị dưới 60 giây (1 phút), đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 sẽ hiển thị vùng nhập giây cùng với giờ và phút

  
  
    
 
  .
.

9

Trong Chrome và Opera, là trình duyệt duy nhất hiển thị mũi tên lặp lại lên/xuống, việc nhấp vào mũi tên sẽ thay đổi giá trị giây thêm hai giây, nhưng không ảnh hưởng đến giờ hoặc phút. Phút (hoặc giờ) chỉ có thể được sử dụng để bước khi bạn chỉ định một số phút (hoặc giờ) tính bằng giây, chẳng hạn như 120 trong 2 phút hoặc 7200 trong 2 giờ)

Trong Firefox, không có mũi tên, vì vậy giá trị

16 không được sử dụng. Tuy nhiên, miễn là nó thêm khu vực nhập giây liền kề với phần phút

Giá trị các bước dường như không có tác dụng trong Edge

Ghi chú. Việc sử dụng

16 dường như khiến quá trình xác thực không hoạt động bình thường (như đã thấy trong phần tiếp theo)

Theo mặc định,

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 không áp dụng bất kỳ xác thực nào cho các giá trị đã nhập, ngoại trừ giao diện của tác nhân người dùng thường không cho phép bạn nhập bất kỳ thứ gì ngoài giá trị thời gian. Điều này hữu ích (giả sử đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 được tác nhân người dùng hỗ trợ đầy đủ), nhưng bạn không thể hoàn toàn dựa vào giá trị đó để trở thành một chuỗi thời gian thích hợp, vì nó có thể là một chuỗi trống (

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

40), được phép. Cũng có thể giá trị trông gần giống như thời gian hợp lệ nhưng không chính xác, chẳng hạn như

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

41

Bạn có thể sử dụng các thuộc tính và để hạn chế thời gian hợp lệ mà người dùng có thể chọn. Trong ví dụ sau, chúng tôi đang đặt thời gian tối thiểu là

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

44 và thời gian tối đa là

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

45

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

2

Đây là CSS được sử dụng trong ví dụ trên. Ở đây, chúng tôi sử dụng các thuộc tính CSS

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

46 và

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

47 để tạo kiểu cho đầu vào dựa trên việc giá trị hiện tại có hợp lệ hay không. Chúng tôi phải đặt các biểu tượng trên

84 bên cạnh đầu vào chứ không phải trên chính đầu vào vì trong Chrome, nội dung được tạo được đặt bên trong điều khiển biểu mẫu và không thể được tạo kiểu hoặc hiển thị một cách hiệu quả

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

3

Kết quả ở đây là

• Chỉ lần giữa 12. 00 và 18. 00 sẽ được coi là hợp lệ;
• Tùy thuộc vào trình duyệt bạn đang sử dụng, bạn có thể thấy rằng thời gian nằm ngoài phạm vi đã chỉ định thậm chí có thể không chọn được trong bộ chọn thời gian (e. g. Bờ rìa)

Đặt tối thiểu và tối đa qua nửa đêm

Bằng cách đặt thuộc tính lớn hơn thuộc tính, phạm vi thời gian hợp lệ sẽ bao gồm khoảng nửa đêm để tạo ra phạm vi thời gian hợp lệ vượt qua nửa đêm. Chức năng này không được hỗ trợ bởi bất kỳ loại đầu vào nào khác. Mặc dù tính năng này vẫn chưa được hỗ trợ phổ biến. Các trình duyệt dựa trên Chrome hỗ trợ nó bắt đầu từ phiên bản 82 và Firefox đã thêm nó vào phiên bản 76. Safari kể từ phiên bản 14. 1 không hỗ trợ này. Hãy chuẩn bị cho tình huống này phát sinh

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5

Ngoài ra, bạn có thể sử dụng thuộc tính để bắt buộc điền thời gian. Do đó, các trình duyệt hỗ trợ sẽ hiển thị lỗi nếu bạn cố gắng gửi thời gian nằm ngoài giới hạn đã đặt hoặc trường thời gian trống

Hãy xem một ví dụ;

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

4

Nếu bạn cố gắng gửi biểu mẫu với thời gian không đầy đủ (hoặc với thời gian nằm ngoài giới hạn đã đặt), trình duyệt sẽ hiển thị lỗi. Hãy thử chơi với ví dụ ngay bây giờ

Cảnh báo. Xác thực biểu mẫu HTML không thay thế cho các tập lệnh đảm bảo rằng dữ liệu đã nhập ở định dạng phù hợp. Quá dễ dàng để ai đó thực hiện các điều chỉnh đối với HTML cho phép họ bỏ qua xác thực hoặc xóa hoàn toàn. Cũng có thể ai đó bỏ qua HTML của bạn hoàn toàn và gửi dữ liệu trực tiếp đến máy chủ của bạn. Nếu mã phía máy chủ của bạn không xác thực được dữ liệu mà nó nhận được, thì thảm họa có thể xảy ra khi gửi dữ liệu có định dạng không đúng (hoặc dữ liệu quá lớn, sai loại, v.v.)

Như đã đề cập, các phiên bản Safari cũ hơn và một số trình duyệt khác, ít phổ biến hơn, không hỗ trợ nhập thời gian nguyên bản. Mặt khác, nói chung, hỗ trợ là tốt — đặc biệt là trên nền tảng di động, thường có giao diện người dùng rất đẹp để chỉ định giá trị thời gian. Ví dụ: bộ chọn

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 trên Chrome dành cho Android trông như thế này

Các trình duyệt không hỗ trợ đầu vào thời gian giảm dần thành đầu vào văn bản, nhưng điều này tạo ra các vấn đề cả về tính nhất quán của giao diện người dùng (điều khiển được trình bày sẽ khác) và xử lý dữ liệu

Vấn đề thứ hai nghiêm trọng hơn; . Mặt khác, với kiểu nhập văn bản, theo mặc định, trình duyệt không biết thời gian nên ở định dạng nào và có nhiều cách để mọi người viết thời gian, chẳng hạn như

• const timeControl = document.querySelector('input[type="time"]');
  timeControl.value = '15:30';
  

  06

• const timeControl = document.querySelector('input[type="time"]');
  timeControl.value = '15:30';
  

  07

• const timeControl = document.querySelector('input[type="time"]');
  timeControl.value = '15:30';
  

  08

• const timeControl = document.querySelector('input[type="time"]');
  timeControl.value = '15:30';
  

  09
• vân vân

Một cách giải quyết vấn đề này là đặt một thuộc tính vào đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 của bạn. Mặc dù đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6 không sử dụng nó, dự phòng đầu vào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

13 sẽ. Ví dụ: hãy thử xem bản trình diễn sau trong trình duyệt không hỗ trợ nhập thời gian

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

0

Nếu thử gửi nó, bạn sẽ thấy rằng các trình duyệt không hỗ trợ hiện hiển thị thông báo lỗi (và đánh dấu đầu vào là không hợp lệ) nếu mục nhập của bạn không khớp với mẫu

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

14, trong đó

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

15 là một số từ 0 đến 9. Tất nhiên, điều này không ngăn mọi người nhập thời gian không hợp lệ hoặc thời gian được định dạng không chính xác theo mẫu

Sau đó, có một vấn đề là người dùng không biết chính xác thời gian dự kiến ​​sẽ ở định dạng nào

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

3

Hiện tại, cách tốt nhất để xử lý thời gian trong các biểu mẫu theo cách đa trình duyệt là yêu cầu người dùng nhập giờ và phút (và giây nếu cần) trong các điều khiển riêng biệt (các yếu tố ___516 là phổ biến; xem bên dưới để biết

Trong ví dụ này, chúng tôi tạo hai bộ thành phần giao diện để chọn thời gian. bộ chọn gốc được tạo bằng

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 và một bộ gồm hai phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

16 để chọn giờ/phút trong các trình duyệt cũ hơn không hỗ trợ đầu vào gốc

HTML trông giống như vậy

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

2

Giá trị giờ và phút cho các phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

16 của chúng được tạo động

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

3

Một phần khác của mã có thể được quan tâm là mã phát hiện tính năng — để phát hiện xem trình duyệt có hỗ trợ

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 hay không, chúng tôi tạo một phần tử

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

5 mới, thử đặt

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

20 thành

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

6, sau đó kiểm tra ngay loại của nó được đặt thành — không . Nếu

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

39 không được hỗ trợ, chúng tôi sẽ ẩn bộ chọn gốc và hiển thị giao diện người dùng bộ chọn dự phòng (

const timeControl = document.querySelector('input[type="time"]');
timeControl.value = '15:30';

16s) thay thế