X
Nhấn vào đây để đến phiên bản di động của trang web.

Diễn đàn trợ giúp

placeholder/css pseudo elements on data picker

Được đăng

Sadly the HTML spec doesn't allow for the placeholder attribute on an <input type='date'...> field, so we have to find workarounds.

In Chrome, and Safari (iOS only, macOS has it's own issues) the hack following works (though annoyingly shws both palceholder and a truncated date picker), but the selector seems to be ignored in Firefox so we see the datepicker but no placeholder.

   <style>
       input[type='date']:before {
           content: attr(placeholder)
         }
   </style>
   <input type="date" name="dob" placeholder="Date of Birth " onfocus="this.placeholder=''" onblur="if (this.value==''){this.placeholder='Date of Birth '}">
   
   

I am hoping I'm just being dumb and missing something obvious, but any pointers are welcome ;)

Sadly the HTML spec doesn't allow for the placeholder attribute on an <input type='date'...> field, so we have to find workarounds. In Chrome, and Safari (iOS only, macOS has it's own issues) the hack following works (though annoyingly shws both palceholder and a truncated date picker), but the selector seems to be ignored in Firefox so we see the datepicker but no placeholder. <style> input[type='date']:before { content: attr(placeholder) } </style> <input type="date" name="dob" placeholder="Date of Birth&nbsp;" onfocus="this.placeholder=&#39;&#39;" onblur="if (this.value==&#39;&#39;){this.placeholder='Date of Birth&nbsp;'}"> I am hoping I'm just being dumb and missing something obvious, but any pointers are welcome ;)

Được chỉnh sửa bởi offbeatmammal vào

Trích dẫn

Chi tiết hệ thống bổ sung

Ứng dụng

  • Chuỗi đại diện người dùng: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:66.0) Gecko/20100101 Firefox/66.0

Thông tin chi tiết

jscher2000
  • Top 10 Contributor
8505 giải pháp 69456 câu trả lời
Được đăng

Where is the placeholder supposed to appear? When I use your input tag, the control is filled with mm/dd/yyyy so there isn't any room for text to appear.

Where is the placeholder supposed to appear? When I use your input tag, the control is filled with '''mm/dd/yyyy''' so there isn't any room for text to appear.
Bài viết này có hữu ích với bạn không?
Trích dẫn

Người tạo câu hỏi

I would like it in place of the dd/mm/yyyy as that conveys no information to the user as to what the field is going to contain. Ideal outcome would be for the placeholder to be replaced by the dd/mm/yyyy text when the field gets focus as then we get the benefit of the placeholder and the formatting hint when the user actually goes to enter data

with the hack above I can have both placeholder and the format hint in Chrome (or just the placeholder on iOS/Android, as there's no keyboard option, just the date picker pop-up)

see https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field/23683687#23683687

I would like it in place of the dd/mm/yyyy as that conveys no information to the user as to what the field is going to contain. Ideal outcome would be for the placeholder to be replaced by the dd/mm/yyyy text when the field gets focus as then we get the benefit of the placeholder and the formatting hint when the user actually goes to enter data with the hack above I can have both placeholder and the format hint in Chrome (or just the placeholder on iOS/Android, as there's no keyboard option, just the date picker pop-up) see https://stackoverflow.com/questions/20321202/not-showing-placeholder-for-input-type-date-field/23683687#23683687
Bài viết này có hữu ích với bạn không?
Trích dẫn
Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.