Cách xóa mm/dd/yyyy khỏi kiểu nhập = ngày trong html

Question

Khi đầu vào ngày được HTML5 thêm vào, nhiều người tin rằng nó sẽ cung cấp cho người dùng một phương pháp nhập ngày trên trang web thân thiện, tương tác và đã biết. Tuy nhiên;

Nội dung chính Show

Con trỏ chính xung quanh mã
Làm cách nào để định dạng ngày đầu vào trong HTML?
Làm cách nào để đặt trình giữ chỗ cho ngày trong HTML?
Loại đầu vào cho ngày sinh trong HTML là gì?
Làm cách nào để hiển thị ngày trong HTML?

Ban đầu, thuộc tính nhập ngày tháng được thiết kế như một phần tử biểu mẫu để chọn các giá trị thông qua bộ đếm ngày tháng. Tuy nhiên, vấn đề nằm ở việc triển khai công cụ hẹn hò thay đổi từ trình duyệt này sang trình duyệt khác. Về cơ bản, điều đó có nghĩa là với tư cách là nhà thiết kế web, bạn phải có ý định cho phép người dùng chọn ngày ở định dạng YYYY/MM/DD thông qua công cụ chọn ngày và bạn đã thiết kế xác thực HTML của mình cho phù hợp, nhưng khi người dùng truy cập trang web thông qua trình duyệt trên

Hiện tại, không có quy tắc nào trong HTML5 cho phép các nhà thiết kế web thay đổi định dạng trong đó phần tử ngày chọn giá trị. Do đó, sự cứng nhắc của yếu tố ngày tháng đã khiến các nhà thiết kế tìm kiếm những cách khác để thay đổi định dạng của ngày tháng mà người dùng nhập vào

Giả sử chúng ta muốn thiết kế một trang web hỏi người dùng về ngày sinh của họ và định dạng của giá trị được nhập phải là YYYY-MM-DD. Làm cách nào chúng ta đạt được điều này bằng cách sử dụng phần tử ngày tháng vì nó không cho phép tự do thay đổi định dạng ngày tháng?

Nếu định dạng ngày là cực kỳ quan trọng đối với hoạt động của trang web, thì chúng tôi sẽ cần đưa ra lựa chọn đó. Dưới đây là đoạn mã có định dạng ngày được thay đổi thành định dạng YYYY-MM-DD

<form>

 Birthday:

<input type="text" name="input" placeholder="YYYY-MM-DD" required 
pattern="(?:19|20)\[0-9\]{2}-(?:(?:0\[1-9\]|1\[0-2\])-(?:0\[1-9\]|1\[0-9\]|2\[0-9\])|(?:(?!02)(?:0\[1-9\]|1\[0-2\])-(?:30))|(?:(?:0\[13578\]|1\[02\])-31))" 
title="Enter a date in this format YYYY-MM-DD"/>

 <input type="submit">

</form>

'Thành phần ngày tháng ở đâu?' Như chúng tôi đã nói, không thể đạt được điều đó chỉ với HTML5 nếu chúng tôi chỉ sử dụng thành phần ngày tháng, nhưng chúng tôi chưa bao giờ nói rằng không thể đạt được điều đó nếu chúng tôi không sử dụng thành phần ngày tháng

Con trỏ chính xung quanh mã

Người dùng sẽ cần nhập các giá trị theo cách thủ công vì anh ta sẽ không có đặc quyền chọn chúng từ bộ đếm ngày
Phần tử mẫu đảm bảo rằng các giá trị đã nhập là hợp lệ. Do đó, thuộc tính mẫu được sử dụng để đạt được xác thực biểu mẫu HTML
Phần tử bắt buộc buộc người dùng phải nhập một số giá trị vì trường này không được để trống
Dấu ngoặc đơn đầu tiên trong phần mẫu kiểm tra các giá trị năm chính xác, theo sau là giá trị tháng chính xác và giá trị ngày chính xác
Để thay đổi ngày sang một định dạng khác, chúng ta chỉ cần thay đổi trình tự của ba lần kiểm tra và dấu phân cách được sử dụng, theo yêu cầu. Dưới đây là mã lấy ngày ở định dạng 'YYYY/MM/DD'

Giải pháp này có nhược điểm là không có popup chọn ngày. Giải pháp sẽ quay trở lại một trong các tiện ích công cụ hẹn hò của jquery

Tôi có hai trường nhập ngày - Từ ngày và Ngày bắt đầu. Tôi cần chuyển trình giữ chỗ trong chúng thay vì nhãn. Tôi đã cố gắng thêm một số văn bản vào thuộc tính Prompt, nhưng nó vẫn hiển thị là "mm/dd/yyyy". Tôi đã thử giải pháp được đề cập tại đây. Nó hoạt động cho trình giữ chỗ, nhưng bây giờ nó không hiển thị ngày đã chọn trong trường. Vui lòng tìm video dưới đây để tham khảo. Tôi đã thêm css vào giải pháp được đề cập cho Ngày từ nhưng không phải cho Ngày kết thúc

Hình ảnh là Ngày kết thúc (đối với Ngày bắt đầu - tôi đã thêm CSS từ liên kết được đề cập).

Trân trọng,

Aman

Thuộc tính trình giữ chỗ không hoạt động với loại đầu vào Ngày, vì vậy hãy đặt bất kỳ giá trị nào làm trình giữ chỗ trong loại đầu vào Ngày. Bạn có thể sử dụng onfocus=”(cái này. type=’date’) bên trong trường nhập liệu. Bởi vì bạn được yêu cầu phải có giá trị giữ chỗ tùy chỉnh cho loại đầu vào "ngày" và bạn có lịch thả xuống nơi người dùng có thể chọn ngày từ đó. cú pháp

onfocus="(this.type='date')"

Ví dụ dưới đây minh họa cách tiếp cận trên. ví dụ 1.

html

<!DOCTYPE html>

<html>

<head>

<<!DOCTYPE html>0_______5_______

<!DOCTYPE html>2<!DOCTYPE html>3

<!DOCTYPE html>2<!DOCTYPE html>5

<!DOCTYPE html>7_______2_______0>

<!DOCTYPE html>7head>

<<5 <6

<html0 html1html0>

<html7_______4_______8html7>

>3

>5

<>8 >9

<0<1_______3_______2<3<4<5

<8

head0

<>8 head4

<!DOCTYPE html>7<5>

<!DOCTYPE html>7html>0

Đầu ra.

Lưu ý. Sau khi nhấp vào trường bên trái, chúng tôi nhận được hộp dd/mm/yyyy và chúng tôi nhận được menu thả xuống lịch sau khi nhấp lại vào đó. Điều này là do hộp đầu vào thực sự là đầu vào “văn bản”, nhưng khi nhấp vào nó (tôi. e. tập trung vào nó), chúng tôi nhận được đầu vào kiểu dữ liệu. Nhưng trường bên phải là trường nhập văn bản bình thường. ví dụ 2. Khi bạn mất tiêu điểm vào ngày, trường ngày sẽ thay đổi lại thành trường văn bản.