ไม่แสดงตัวยึดสำหรับฟิลด์ประเภทอินพุต =“ วันที่”

ฉันกำลังทำแอพ phonegap เมื่อฉันกำลังลองtype="date"ช่องป้อนข้อมูลดังที่แสดงด้านล่างมันจะแสดงตัวเลือกวันที่ใน iPhone ตามที่ฉันคาดไว้ แต่มันไม่แสดงตัวยึดตำแหน่งที่ฉันให้ไว้ ฉันพบปัญหาเดียวกันที่นี่ใน SO แต่ไม่มีวิธีแก้ปัญหาใด ๆ

 <input placeholder="Date" class="textbox-n" type="date" id="date">

มันอาจจะไม่เหมาะสม ... แต่มันช่วยฉัน

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

หากคุณใช้วิธีของ mvp แต่เพิ่มเหตุการณ์ onblur เพื่อเปลี่ยนกลับเป็นช่องข้อความเพื่อให้ข้อความตัวยึดปรากฏขึ้นอีกครั้งเมื่อช่องป้อนข้อมูลหลุดโฟกัส มันทำให้แฮ็คดีขึ้นเล็กน้อย

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" />

หวังว่านี่จะช่วยได้

ฉันใช้สิ่งต่อไปนี้

เกี่ยวกับความคิดเห็นของ Firefox : โดยทั่วไป Firefox จะไม่แสดงตัวยึดข้อความใด ๆ สำหรับวันที่ประเภทอินพุต แต่เนื่องจากนี่เป็นคำถาม Cordova / PhoneGap จึงไม่น่าเป็นห่วง (ยกเว้นกรณีที่คุณต้องการพัฒนากับ FirefoxOS)

input[type="date"]:not(.has-value):before{
  color: lightgray;
  content: attr(placeholder);
}

<input type="date" placeholder="MY PLACEHOLDER" onchange="this.className=(this.value!=''?'has-value':'')">

ฉันใช้สิ่งนี้ใน css ของฉัน:

input[type="date"]:before{
    color:lightgray;
    content:attr(placeholder);
}

input[type="date"].full:before {
    color:black;
    content:""!important;
}

และใส่สิ่งนี้ลงในจาวาสคริปต์:

$("#myel").on("input",function(){
    if($(this).val().length>0){
    $(this).addClass("full");
}
else{
   $(this).removeClass("full");
   }
 });

มันใช้ได้กับฉันสำหรับอุปกรณ์มือถือ (Ios8 และ android) แต่ฉันใช้ jquery inputmask สำหรับเดสก์ท็อปที่มีประเภทข้อความอินพุต วิธีนี้เป็นวิธีที่ดีถ้าโค้ดของคุณทำงานบน IE8

ณ วันนี้ (2016) ฉันได้ใช้ตัวอย่างข้อมูลทั้ง 2 นี้สำเร็จแล้ว (รวมทั้งใช้งานได้ดีกับ Bootstrap4)

ป้อนข้อมูลทางด้านซ้ายตัวยึดทางด้านซ้าย

input[type=date] {
  text-align: right;
}

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}

ตัวยึดตำแหน่งหายไปเมื่อคลิก

input[type="date"]:before {
  color: lightgrey;
  content: attr(placeholder) !important;
  margin-right: 0.5em;
}
input[type="date"]:focus:before {
  content: '' !important;
}

ตามมาตรฐาน HTML :

ต้องไม่ระบุแอ็ตทริบิวต์เนื้อหาต่อไปนี้และไม่ใช้กับองค์ประกอบ: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src และความกว้าง

มันใช้ได้กับฉัน:

input[type='date']:after {
  content: attr(placeholder)
}

ฉันใช้ jQuery เล็กน้อยนี้: http://jsfiddle.net/daviderussoabram/65w1qhLz/

$('input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"]').each(function() {
    var el = this, type = $(el).attr('type');
    if ($(el).val() == '') $(el).attr('type', 'text');
    $(el).focus(function() {
        $(el).attr('type', type);
        el.click();
    });
    $(el).blur(function() {
        if ($(el).val() == '') $(el).attr('type', 'text');
    });
});

จากคำตอบของ deadproxor และ Alessio ฉันจะลองใช้ CSS เท่านั้น:

input[type="date"]::before{
    color: #999;
    content: attr(placeholder) ": ";
}
input[type="date"]:focus::before {
    content: "" !important;
}

และหากคุณต้องการทำให้ตัวยึดตำแหน่งมองไม่เห็นหลังจากเขียนบางสิ่งในอินพุตเราสามารถลองใช้ตัวเลือก: valid และ: ไม่ถูกต้องหากอินพุตของคุณเป็นข้อมูลที่จำเป็น

แก้ไข

นี่คือรหัสหากคุณใช้จำเป็นในการป้อนข้อมูลของคุณ:

input[type="date"]::before {
	color: #999999;
	content: attr(placeholder);
}
input[type="date"] {
	color: #ffffff;
}
input[type="date"]:focus,
input[type="date"]:valid {
	color: #666666;
}
input[type="date"]:focus::before,
input[type="date"]:valid::before {
	content: "" !important;
}

<input type="date" placeholder="Date" required>

พบวิธีที่ดีกว่าในการแก้ปัญหาของคุณ ฉันคิดว่านี่จะช่วยคุณได้ เมื่อโฟกัสออกมากล่องจะเปลี่ยนประเภทเป็นข้อความเพื่อให้แสดงตัวยึดตำแหน่งของคุณ เมื่อโฟกัสเข้าประเภทของมันจะเปลี่ยนเป็นวันที่เพื่อให้แสดงมุมมองปฏิทิน

<input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"> 

ฉันใช้ความคิด jbarlow แต่ฉันเพิ่ม if ในฟังก์ชัน onblur ดังนั้นฟิลด์จะเปลี่ยนประเภทเท่านั้นถ้าค่าว่างเปล่า

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.value == '' ? this.type='text' : this.type='date')" id="date">

การแก้ไขปัญหาในคำตอบที่ถูกต้องในปัจจุบัน "การคลิกฟิลด์จะแสดงแป้นพิมพ์บนหน้าจอแทน datepicker":

ปัญหาเกิดจากเบราว์เซอร์ทำงานตามประเภทของอินพุตเมื่อคลิก (= ข้อความ) ดังนั้นจึงจำเป็นต้องหยุดจากการโฟกัสที่องค์ประกอบอินพุต (เบลอ) จากนั้นเริ่มโฟกัสใหม่โดยใช้โปรแกรมบนองค์ประกอบอินพุตซึ่งกำหนดเป็น type = date โดย JS ในขั้นตอนแรก แป้นพิมพ์จะแสดงในโหมดตัวเลข

<input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();">

ลองใช้วิธีแก้ปัญหาของฉัน ฉันใช้แอตทริบิวต์ 'จำเป็น' เพื่อรับทราบว่ามีการกรอกข้อมูลหรือไม่และหากไม่แสดงข้อความจากแอตทริบิวต์ 'placeholder'

//HTML
<input required placeholder="Date" class="textbox-n" type="date" id="date">

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}

ขอเวลาฉันหาข้อมูลนี้ทิ้งไว้type="text"และเพิ่มonfocus="(this.type='date')"ตามที่แสดงด้านบน

ฉันชอบแนวคิด onBlur ที่กล่าวถึงข้างต้นด้วยซ้ำ

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">

หวังว่านี่จะช่วยทุกคนที่ไม่ได้รวบรวมสิ่งที่เกิดขึ้นข้างต้น

เพื่อสรุปปัญหาอินพุตวันที่:

• คุณต้องแสดงสิ่งเหล่านี้ (เช่นหลีกเลี่ยงการแสดง: ไม่มี) มิฉะนั้น UI อินพุตจะไม่ถูกทริกเกอร์
• ตัวยึดตำแหน่งขัดแย้งกับพวกเขา (ตามข้อกำหนดและเนื่องจากต้องแสดง UI เฉพาะ)
• การแปลงให้เป็นประเภทอินพุตอื่นสำหรับเวลาที่ไม่ได้โฟกัสจะทำให้ตัวยึดตำแหน่ง แต่การโฟกัสจะทริกเกอร์ UI (แป้นพิมพ์) ที่ไม่ถูกต้องอย่างน้อยก็ในช่วงเวลาสั้น ๆ เนื่องจากไม่สามารถยกเลิกเหตุการณ์โฟกัสได้
• การแทรก (ก่อน) หรือเพิ่ม (หลัง) เนื้อหาไม่ได้ป้องกันไม่ให้แสดงค่าอินพุตวันที่

วิธีแก้ปัญหาที่ฉันพบว่าเป็นไปตามข้อกำหนดเหล่านั้นคือการใช้เคล็ดลับปกติในการจัดรูปแบบองค์ประกอบเนทีฟ: ตรวจสอบให้แน่ใจว่าองค์ประกอบนั้นแสดง แต่มองไม่เห็นและแสดงรูปแบบที่คาดหวังผ่านป้ายกำกับที่เกี่ยวข้องแสดงรูปแบบที่คาดว่าจะผ่านป้ายที่เกี่ยวข้องโดยทั่วไปป้ายกำกับจะแสดงเป็นอินพุต (รวมถึงตัวยึดตำแหน่ง) แต่อยู่เหนือป้ายนั้น

ดังนั้น HTML เช่น:

<div class="date-input>
  <input id="myInput" type="date"> 
  <label for="myInput"> 
    <span class="place-holder">Enter a date</span> 
  </label>
</div>

อาจมีสไตล์เป็น:

.date-input {
  display: inline-block;
  position: relative;
}
/* Fields overriding */
input[type=date] + label {
  position: absolute;  /* Same origin as the input, to display over it */
  background: white;   /* Opaque background to hide the input behind */
  left: 0;             /* Start at same x coordinate */
}

/* Common input styling */
input[type=date], label {  
  /* Must share same size to display properly (focus, etc.) */
  width: 15em;
  height: 1em;
  font-size: 1em;
}

เหตุการณ์ใด ๆ (คลิกโฟกัส) บนป้ายกำกับที่เกี่ยวข้องดังกล่าวจะแสดงในฟิลด์นั้นเองดังนั้นจึงเรียกใช้ UI การป้อนข้อมูลวันที่

หากคุณต้องการทดสอบโซลูชันดังกล่าวแบบสดคุณสามารถเรียกใช้Angular เวอร์ชันนี้จากแท็บเล็ตหรือมือถือของคุณ

ดังนั้นสิ่งที่ฉันตัดสินใจทำในที่สุดก็มาถึงแล้วและมันทำงานได้ดีบนเบราว์เซอร์มือถือทั้งหมดรวมถึง iPhone และ Android

$(document).ready(function(){

  $('input[type="date"]').each(function(e) {
    var $el = $(this), 
        $this_placeholder = $(this).closest('label').find('.custom-placeholder');
    $el.on('change',function(){
      if($el.val()){
        $this_placeholder.text('');
      }else {
        $this_placeholder.text($el.attr('placeholder'));
      }
    });
  });
  
});

label {
  position: relative;  
}
.custom-placeholder {
    #font > .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}

<label>
  <input type="date" placeholder="Date">
  <span class="custom-placeholder">Date</span>
</label>

วันที่

ฉันทำงานกับไอออนิกเฟรมและโซลูชันที่จัดทำโดย @Mumthezir เกือบจะสมบูรณ์แบบแล้ว เผื่อว่าจะมีใครมีปัญหาแบบเดียวกับฉัน (หลังจากเปลี่ยนแล้ว input ยังโฟกัสอยู่และเมื่อเลื่อนค่าก็จะหายไป) ดังนั้นฉันจึงเพิ่ม onchange เพื่อให้ input.blur ()

<input placeholder="Date" class="textbox-n" type="text" onfocus=" (this.type='date')" onchange="this.blur();"  id="date"> 

คุณสามารถ

1. ตั้งเป็นข้อความประเภท
2. แปลงเป็นวันที่โฟกัส
3. ให้คลิกที่มัน
4. ... ให้ผู้ใช้ตรวจสอบวันที่
5. ในการเปลี่ยนแปลงเก็บค่า
6. ตั้งค่าการป้อนข้อมูลเพื่อพิมพ์ข้อความ
7. ตั้งค่าอินพุตประเภทข้อความเป็นค่าที่เก็บไว้

แบบนี้...

$("#dateplaceholder").change(function(evt) {
  var date = new Date($("#dateplaceholder").val());
  $("#dateplaceholder").attr("type", "text");
  $("#dateplaceholder").val(date.getDate() + "/" + (date.getMonth() + 1) + "/" + date.getFullYear());
});
$("#dateplaceholder").focus(function(evt) {
  $("#dateplaceholder").attr("type", "date");
  setTimeout('$("#dateplaceholder").click();', 500);
});
$("#dateplaceholder").attr("type", "text");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<input type="date" id="dateplaceholder" placeholder="Set the date" />

พบวิธีที่ดีกว่าในการจัดการกับความเข้าใจพื้นฐานของผู้ใช้ด้วยการวางเมาส์และเปิด datepicker เมื่อคลิก:

<input type="text" onfocus="(this.type='date')" onmouseover="(this.type = 'date')" onblur="(this.value ? this.type = 'date' : this.type = 'text')" id="date_start" placeholder="Date">

ซ่อนลูกศร webkit ด้วยและทำให้กว้าง 100% เพื่อให้ครอบคลุมการคลิก:

input[type="date"] {
    position: relative;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  height: 100%;
  width: 100%;
  opacity: 0;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
}

จากมุมมองเชิงมุมฉันจัดการเพื่อใส่ตัวยึดตำแหน่งในองค์ประกอบวันที่ประเภทอินพุต

ก่อนอื่นฉันกำหนด css ต่อไปนี้:

.placeholder {
    color: $text-grey;
  }

  input[type='date']::before {
    content: attr(placeholder);
  }

  input::-webkit-input-placeholder {
    color: $text-grey;
  }

สาเหตุที่จำเป็นคือถ้าเนื้อหา css3 มีสีแตกต่างจากตัวยึดตำแหน่งปกติดังนั้นฉันจึงต้องใช้สีทั่วไป

<input #birthDate
         class="birthDate placeholder"
         type="date"
         formControlName="birthDate"
         placeholder="{{getBirthDatePlaceholder() | translate}}"
         [class.error]="!onboardingForm.controls.birthDate.valid && onboardingForm.controls.birthDate.dirty"
         autocomplete="off"
         >

จากนั้นในเทมเพลตใช้แอตทริบิวต์ viewchild birthDate เพื่อให้สามารถเข้าถึงอินพุตนี้จากคอมโพเนนต์ และกำหนดนิพจน์เชิงมุมบนแอตทริบิวต์ตัวยึดตำแหน่งซึ่งจะตัดสินว่าเราแสดงตัวยึดตำแหน่งหรือไม่ นี่คือข้อเสียเปรียบที่สำคัญของการแก้ปัญหาคือคุณต้องจัดการการมองเห็นของตัวยึดตำแหน่ง

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

<input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control">

แก้ไขรหัสของ mumthezir

ฉันแปลกใจที่มีเพียงคำตอบเดียวที่มีวิธีการคล้ายกับที่ฉันใช้
ฉันได้รับแรงบันดาลใจจากความคิดเห็นของ @Dtipson เกี่ยวกับคำตอบของ @Mumthezir VP

ผมใช้ทั้งสองปัจจัยนี้เป็นหนึ่งในการป้อนข้อมูลปลอมกับที่ผมตั้งตัวยึดอีกคนหนึ่งคือสนามจริงกับtype="text" ในเหตุการณ์บนคอนเทนเนอร์ของพวกเขาฉันซ่อนอินพุตปลอมและแสดงของจริงและฉันทำตรงกันข้ามกับเหตุการณ์นั้น เห็นได้ชัดว่าฉันปล่อยให้อินพุตที่มองเห็นได้จริงหากมีค่าที่กำหนดไว้ ฉันเขียนโค้ดเพื่อใช้ Javascript แต่ถ้าคุณใช้ jQuery (ฉันทำ) มันง่ายมากที่จะ "แปลง" มันtype="date"
mouseentermouseleave

// "isMobile" function taken from this reply:
// https://stackoverflow.com/a/20293441/3514976
function isMobile() {
  try { document.createEvent("TouchEvent"); return true; }
  catch(e) { return false; }
}

var deviceIsMobile = isMobile();

function mouseEnterListener(event) {
  var realDate = this.querySelector('.real-date');
  // if it has a value it's already visible.
  if(!realDate.value) {
    this.querySelector('.fake-date').style.display = 'none';
    realDate.style.display = 'block';
  }
}

function mouseLeaveListener(event) {
  var realDate = this.querySelector('.real-date');
  // hide it if it doesn't have focus (except
  // on mobile devices) and has no value.
  if((deviceIsMobile || document.activeElement !== realDate) && !realDate.value) {
    realDate.style.display = 'none';
    this.querySelector('.fake-date').style.display = 'block';
  }
}

function fakeFieldActionListener(event) {
  event.preventDefault();
  this.parentElement.dispatchEvent(new Event('mouseenter'));
  var realDate = this.parentElement.querySelector('.real-date');
  // to open the datepicker on mobile devices
  // I need to focus and then click on the field.
  realDate.focus();
  realDate.click();
}

var containers = document.getElementsByClassName('date-container');
for(var i = 0; i < containers.length; ++i) {
  var container = containers[i];
  
  container.addEventListener('mouseenter', mouseEnterListener);
  container.addEventListener('mouseleave', mouseLeaveListener);
  
  var fakeDate = container.querySelector('.fake-date');
  // for mobile devices, clicking (tapping)
  // on the fake input must show the real one.
  fakeDate.addEventListener('click', fakeFieldActionListener);
  // let's also listen to the "focus" event
  // in case it's selected using a keyboard.
  fakeDate.addEventListener('focus', fakeFieldActionListener);
  
  var realDate = container.querySelector('.real-date');
  // trigger the "mouseleave" event on the
  // container when the value changes.
  realDate.addEventListener('change', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
  // also trigger the "mouseleave" event on
  // the container when the input loses focus.
  realDate.addEventListener('blur', function() {
    container.dispatchEvent(new Event('mouseleave'));
  });
}

.real-date {
  display: none;
}

/* a simple example of css to make 
them look like it's the same element */
.real-date, 
.fake-date {
  width: 200px;
  height: 20px;
  padding: 0px;
}

<div class="date-container">
  <input type="text" class="fake-date" placeholder="Insert date">
  <input type="date" class="real-date">
</div>

ฉันทดสอบสิ่งนี้บนโทรศัพท์ Android และใช้งานได้เมื่อผู้ใช้แตะที่ฟิลด์ datepicker จะปรากฏขึ้น สิ่งเดียวคือหากอินพุตจริงไม่มีค่าและผู้ใช้ปิดตัวจับวันที่โดยไม่เลือกวันที่อินพุตจะยังคงมองเห็นได้จนกว่าพวกเขาจะแตะด้านนอก ไม่มีเหตุการณ์ที่จะฟังเพื่อให้รู้ว่า datepicker ปิดดังนั้นฉันจึงไม่รู้วิธีแก้ปัญหานั้น

ฉันไม่มีอุปกรณ์ iOS ที่จะทดสอบ

การขยายโซลูชันของ @ mvp โดยคำนึงถึงจาวาสคริปต์ที่ไม่สร้างความรำคาญนี่คือแนวทาง:

HTML:

<input type="text" placeholder="Date" class="js-text-date-toggle">

javascript:

$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)

ฉันคิดว่าสิ่งที่คุณต้องทำคือเปลี่ยนโมเดลเพื่อบอกว่าฟิลด์วันที่เป็นโมฆะจากนั้นใส่ [จำเป็น] ลงไปหากจำเป็น หากคุณทำเช่นนี้ข้อความตัวยึดจะปรากฏขึ้น

เฮ้ฉันจึงพบปัญหาเดียวกันเมื่อคืนและพบว่าคำตอบทั้งหมดของคุณรวมกันและเวทมนตร์ที่เปล่งประกายบางอย่างก็ทำงานได้ดี:

HTML:

<input type="date"  name="flb5" placeholder="Datum"     class="datePickerPlaceHolder"/>

CSS:

@media(max-width: 1024px) {
   input.datePickerPlaceHolder:before {
      color: #A5A5A5; //here you have to match the placeholder color of other inputs
      content: attr(placeholder) !important;
   }
}

jQuery:

$(document).ready(function() {
    $('input[type="date"]').change(function(){
            if($(this).val().length < 1) {
                $(this).addClass('datePickerPlaceHolder');
            } else {
                $(this).removeClass('datePickerPlaceHolder');
            }
    });
});

คำอธิบาย: ดังนั้นสิ่งที่เกิดขึ้นที่นี่ประการแรกในHTMLสิ่งนี้ค่อนข้างตรงไปตรงมาเพียงแค่ทำการป้อนข้อมูลวันที่ HMTL5 พื้นฐานและตั้งค่าตัวยึด จุดต่อไป: CSSเรากำลังตั้งค่า a: before-pseudo-element เพื่อปลอมตัวยึดตำแหน่งของเราเพียงแค่ใช้แอตทริบิวต์ของ placeholder จากอินพุตเท่านั้น ฉันทำให้สิ่งนี้พร้อมใช้งานจากความกว้างของวิวพอร์ต 1024px เท่านั้น - ทำไมฉันจะบอกทีหลัง และตอนนี้jQueryหลังจากปรับโครงสร้างใหม่สองสามครั้งฉันได้สร้างโค้ดนี้ขึ้นมาซึ่งจะตรวจสอบการเปลี่ยนแปลงทุกครั้งว่ามีการตั้งค่าหรือไม่ถ้าไม่ใช่มันจะเพิ่มคลาสในทางกลับกัน (อีกครั้ง) .

รู้ประเด็น:

• มีปัญหาใน chrome กับตัวเลือกวันที่เริ่มต้นนั่นคือสิ่งที่สื่อค้นหามีไว้สำหรับ จะเพิ่มตัวยึดด้านหน้าของค่าเริ่มต้น 'dd.mm.yyyy'-thing นอกจากนี้คุณยังสามารถตั้งค่าตัวยึดตำแหน่งของอินพุตวันที่เป็น 'วันที่:' และปรับค่าสีในกรณีที่ไม่มีค่าภายในอินพุต ... สำหรับฉันสิ่งนี้ส่งผลให้เกิดปัญหาเล็ก ๆ น้อย ๆ อื่น ๆ ดังนั้นฉันจึงไปโดยไม่แสดงบน 'ใหญ่กว่า 'หน้าจอ

หวังว่าจะช่วยได้! ไชโย!

หากคุณสนใจเฉพาะมือถือ:

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}

HTML:

<div>
    <input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/>
    <h3 id="placeholder-inputDate">Date Text</h3>
</div>

JavaScript:

$('#inputDate').ready(function () {
$('#placeholder-inputDate').attr('style'
    , 'top: ' + ($('#placeholder-inputDate').parent().position().top + 10)
    + 'px; left: ' + ($('#placeholder-inputDate').parent().position().left + 0) + 'px; position: absolute;');
$('#inputDate').attr('style'
    , 'width: ' + ($('#placeholder-inputDate').width() + 32) + 'px;');
});

นี่เป็นอีกหนึ่งสับเป็นไปไม่ได้ใช้ js และยังคงใช้ contentCSS โปรดทราบว่า:afterเบราว์เซอร์บางตัวไม่รองรับอินพุตเราจำเป็นต้องเลือกอินพุตด้วยวิธีอื่นเช่นเดียวกับcontent attr('')

input[type=date]:invalid+span:after {
  content:"Birthday";
  position:absolute;
  left:0;
  top:0;
}

input[type=date]:focus:invalid+span:after {
  display:none;
}

input:not(:focus):invalid {
  color:transparent;
}

label.wrapper {
	position:relative;
}

<label class="wrapper">
	<input
 	  type="date"
  	  required="required" 
	/>
	<span></span>
</label>

สิ่งนี้ใช้ได้กับฉันโดยใช้สิ่งนี้เป็นองค์ประกอบอินพุต:

<input name="birthdate" class="" class="wpcf7-form-control wpcf7-date 
 wpcf7-validates-as-required wpcf7-validates-as-date birthdate" value="" 
 aria-required="true" aria-invalid="false" placeholder="birthdate *" 
 type="date">

CSS นี้แสดงตัวยึดถาวร ค่าที่เลือกจะแสดงหลังตัวยึด

input[type="date"]:before {
    content: attr(placeholder) !important;
    margin-right: 0.5em;
    display: block;
}
/* only for FF */
@-moz-document url-prefix() {
    input[type="date"]:before {
        content: attr(placeholder) !important;
        margin-right: 0.5em;
        display: block;
        position: absolute;
        left: 200px; /* please adopt */
    }
}

ฉันใช้โซลูชันนี้สำหรับแบบฟอร์ม Wordpress พร้อมปลั๊กอิน contact-form-7

ไม่มีวิธีแก้ปัญหาใดที่ทำงานได้อย่างถูกต้องสำหรับฉันบน Chrome ใน iOS 12 และส่วนใหญ่ไม่ได้รับการปรับแต่งเพื่อรับมือกับอินพุตวันที่ที่เป็นไปได้หลายรายการบนหน้า ฉันทำสิ่งต่อไปนี้ซึ่งโดยทั่วไปจะสร้างป้ายกำกับปลอมในการป้อนวันที่และลบออกเมื่อแตะ ฉันกำลังลบป้ายกำกับปลอมหากความกว้างของวิวพอร์ตเกิน 992px

JS:

function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('<span class="date-label" />');

    $('span.date-label').each(function() {
        var $placeholderText = $(this).prev('input[type="date"]').attr('placeholder');
        $(this).text($placeholderText);
    });

    $('input[type="date"]').on("click", function() {
        $(this).next("span.date-label").remove();
    });
}

CSS:

@media (max-width: 991px) {
    input[type="date"] {
        padding-left: calc(50% - 45px);
    }

    span.date-label {
        pointer-events: none;
        position: absolute;
        top: 2px;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        height: 27px;
        width: 70%;
        padding-top: 5px;
    }
}