Nhận giá trị datetimepicker PHP

Thử nó

Giao diện người dùng của điều khiển nói chung thay đổi từ trình duyệt này sang trình duyệt khác. Trong các trình duyệt không có hỗ trợ, những trình duyệt này xuống cấp một cách duyên dáng thành các điều khiển

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Điều khiển nhằm biểu thị ngày và giờ địa phương, không nhất thiết phải là ngày và giờ địa phương của người dùng. Nói cách khác, việc triển khai phải cho phép bất kỳ sự kết hợp hợp lệ nào của năm, tháng, ngày, giờ và phút—ngay cả khi sự kết hợp đó không hợp lệ theo múi giờ địa phương của người dùng (chẳng hạn như thời gian trong khoảng thời gian tiết kiệm ánh sáng ban ngày giữa mùa xuân và chuyển tiếp . Một số trình duyệt di động (đặc biệt là trên iOS) hiện không triển khai chính xác điều này

Do trình duyệt hỗ trợ hạn chế cho

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Một số trình duyệt có thể sử dụng yếu tố đầu vào chỉ có văn bản để xác thực rằng kết quả là giá trị ngày/giờ hợp lệ trước khi cho phép chúng được gửi đến máy chủ, nhưng bạn không nên dựa vào hành vi này vì bạn không thể dễ dàng dự đoán

Giá trị

Một chuỗi đại diện cho giá trị của ngày được nhập vào đầu vào. Định dạng của giá trị ngày và giờ được sử dụng bởi loại đầu vào này được mô tả trong Chuỗi ngày và giờ cục bộ trong Định dạng ngày và giờ được sử dụng trong HTML

Bạn có thể đặt giá trị mặc định cho đầu vào bằng cách bao gồm ngày và giờ bên trong thuộc tính

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

________số 8

Một điều cần lưu ý là định dạng ngày và giờ được hiển thị khác với thực tế của

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Ghi chú. Ngoài ra, hãy nhớ rằng nếu dữ liệu đó được gửi qua HTTP

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Có một số phương pháp được cung cấp bởi JavaScript's

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

thuộc tính bổ sung

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

tối đa

Ngày và giờ mới nhất để chấp nhận. Nếu

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Giá trị này phải chỉ định chuỗi ngày muộn hơn hoặc bằng chuỗi ngày được chỉ định bởi thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

tối thiểu

Ngày và thời gian sớm nhất để chấp nhận; . Nếu giá trị của thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Giá trị này phải chỉ định một chuỗi ngày sớm hơn hoặc bằng chuỗi được chỉ định bởi thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

bươc

Thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Giá trị chuỗi là

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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 dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Sử dụng đầu vào datetime-local

Thoạt nhìn, đầu vào ngày/giờ nghe có vẻ tiện lợi; . Tuy nhiên, có vấn đề với

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Chúng ta sẽ xem xét các cách sử dụng cơ bản và phức tạp hơn của

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Sử dụng cơ bản của datetime-local

Việc sử dụng đơn giản nhất của

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Đặt ngày và thời gian tối đa và tối thiểu

Bạn có thể sử dụng các thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Kết quả ở đây là

• Chỉ có thể chọn các ngày trong tháng 6 năm 2017 — chỉ phần "ngày" của giá trị ngày mới có thể chỉnh sửa được và không thể cuộn đến các ngày ngoài tháng 6 trong tiện ích bộ chọn ngày
• 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 các giá trị đã chỉ định có thể không chọn được trong bộ chọn thời gian (e. g. Edge), hoặc không hợp lệ (xem Xác thực) nhưng vẫn khả dụng (e. g. Trình duyệt Chrome)

Ghi chú. Bạn sẽ có thể sử dụng thuộc tính

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Kiểm soát kích thước đầu vào

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Đặt múi giờ

Một điều mà loại đầu vào

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Ví dụ: nếu bạn đang tạo một hệ thống mà người dùng có khả năng đã đăng nhập, với ngôn ngữ của họ đã được đặt, thì bạn có thể cung cấp múi giờ ở loại đầu vào

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Mặt khác, nếu bạn được yêu cầu cho phép người dùng nhập múi giờ cùng với đầu vào ngày/giờ, bạn có thể có phần tử

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Trong cả hai trường hợp, các giá trị ngày/giờ và múi giờ sẽ được gửi tới máy chủ dưới dạng các điểm dữ liệu riêng biệt, sau đó bạn cần lưu trữ chúng một cách thích hợp trong cơ sở dữ liệu ở phía máy chủ

Thẩm định

Theo mặc định,

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Bạn có thể sử dụng

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Nếu bạn cố gắng gửi biểu mẫu với ngày không đầy đủ (hoặc với ngày 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ờ

Đâ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 dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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ảm họa có thể xảy ra khi dữ liệu được định dạng không đúng (hoặc dữ liệu quá lớn, không đúng loại, v.v.)

Xử lý hỗ trợ trình duyệt

Như đã đề cập ở trên, các trình duyệt không hỗ trợ xuống cấp một cách duyên dáng thành kiểu nhập 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 là nghiêm trọng nhất; . Mặt khác, với kiểu nhập văn bản, theo mặc định, trình duyệt không nhận dạng được định dạng của ngày tháng và có rất nhiều cách khác nhau để mọi người viết ngày và giờ, chẳng hạn

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  23

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  24

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  25

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  26

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  27

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  28 (đồng hồ 12 giờ)

• <form>
    <label for="party">Enter a date and time for your party booking:label>
    <input id="party" type="datetime-local" name="partydate" />
  form>
  

  29 (đồng hồ 24 giờ)
• vân vân

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

<label for="party">Enter a date and time for your party booking:label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

<form>
  <label for="party">Enter a date and time for your party booking:label>
  <input id="party" type="datetime-local" name="partydate" />
form>

Nếu bạn thử gửi nó, bạn sẽ thấy rằng trình duyệt 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

<label for="party">Enter a date and time for your party booking:label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

<label for="party">Enter a date and time for your party booking:label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

Và người dùng nào sẽ hiểu mẫu mà họ cần nhập ngày giờ?

Chúng tôi vẫn có một vấn đề

<label for="party">Enter a date and time for your party booking:label>
<input
  id="party"
  type="datetime-local"
  name="partydate"
  value="2017-06-01T08:30" />

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

Sự cố Y2K38 (thường là phía máy chủ)

JavaScript sử dụng các dấu phẩy động có độ chính xác kép để lưu trữ ngày, cũng như với tất cả các số, có nghĩa là mã JavaScript sẽ không gặp phải sự cố Y2K38 trừ khi sử dụng ép buộc số nguyên/hack bit vì tất cả các toán tử bit JavaScript đều sử dụng số nguyên bổ sung 2 giây có chữ ký 32 bit

Vấn đề là ở phía máy chủ của mọi thứ. lưu trữ ngày lớn hơn 2^31 - 1. Để khắc phục sự cố này, bạn phải lưu trữ tất cả các ngày bằng cách sử dụng số nguyên 32 bit không dấu, số nguyên 64 bit có dấu hoặc dấu phẩy động có độ chính xác kép trên máy chủ. Nếu máy chủ của bạn được viết bằng PHP, cách khắc phục có thể đơn giản như nâng cấp lên PHP 8 hoặc 7 và nâng cấp phần cứng của bạn lên x86_64 hoặc IA64. Nếu bạn gặp khó khăn với phần cứng khác, bạn có thể thử mô phỏng phần cứng 64 bit bên trong máy ảo 32 bit, nhưng hầu hết các máy ảo không hỗ trợ loại ảo hóa này, vì tính ổn định có thể bị ảnh hưởng và hiệu suất chắc chắn sẽ bị ảnh hưởng nghiêm trọng

Sự cố Y10k (thường phía máy khách)

Trong nhiều máy chủ, ngày được lưu trữ dưới dạng số thay vì dưới dạng chuỗi - số có kích thước cố định và định dạng bất khả tri (ngoài tính lâu dài). Sau năm 10.000, những con số đó sẽ lớn hơn một chút so với trước đây, vì vậy nhiều máy chủ sẽ không gặp vấn đề với các biểu mẫu được gửi sau năm 10.000

Vấn đề là ở phía khách hàng của mọi thứ. phân tích ngày có hơn 4 chữ số trong năm

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Nó đơn giản mà. Chỉ cần chuẩn bị mã của bạn cho bất kỳ số chữ số nào. Đừng chỉ chuẩn bị cho 5 chữ số. Đây là mã JavaScript để thiết lập giá trị theo chương trình

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Tại sao phải lo lắng về vấn đề Y10K nếu nó sẽ xảy ra nhiều thế kỷ sau khi bạn qua đời?

ví dụ

Trong ví dụ này, chúng tôi tạo hai bộ thành phần giao diện người dùng để chọn ngày giờ — một bộ chọn

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Các tháng được mã hóa cứng (vì chúng luôn giống nhau), trong khi các giá trị ngày và năm được tạo động tùy thuộc vào tháng và năm được chọn hiện tại và năm hiện tại tương ứng (xem các chú thích mã bên dưới để biết giải thích chi tiết về cách các . ) Chúng tôi cũng quyết định tạo giờ và phút một cách linh hoạt vì có rất nhiều trong số chúng

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

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 dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

const dateControl = document.querySelector('input[type="datetime-local"]');
dateControl.value = '2017-06-01T08:30';

Ghi chú. Hãy nhớ rằng một số năm có 53 tuần trong đó (xem Số tuần mỗi năm). Bạn sẽ cần cân nhắc điều này khi phát triển các ứng dụng sản xuất

Làm cách nào để lấy giá trị của bộ chọn ngày trong PHP?

DatePicker nội tuyến là gì?

Làm cách nào để thêm Datetimepicker trong HTML?