Không hiển thị trình giữ chỗ cho trường input type = “date”

Tôi đang làm một ứng dụng bản đồ điện thoại. Khi tôi đang thử type="date"trường nhập liệu như được hiển thị bên dưới, nó sẽ hiển thị bộ chọn ngày trong iPhone như tôi mong đợi nhưng nó không hiển thị trình giữ chỗ mà tôi đã đưa. Tôi đã tìm thấy vấn đề tương tự ở đây trong SO, nhưng không có giải pháp ở bất kỳ đâu.

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

Nó có thể không phù hợp ... nhưng nó đã giúp tôi.

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

Nếu bạn sử dụng phương thức của mvp nhưng thêm sự kiện onblur để thay đổi nó trở lại trường văn bản để văn bản chỗ dành sẵn xuất hiện lại khi trường nhập bị mất tiêu điểm. Nó chỉ làm cho bản hack đẹp hơn một chút.

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

Hi vọng điêu nay co ich.

Tôi đã kết thúc bằng cách sử dụng sau đây.

Về (các) nhận xét trên Firefox : Nói chung, Firefox sẽ không hiển thị bất kỳ trình giữ chỗ văn bản nào cho ngày nhập loại đầu vào. Nhưng vì đây là một câu hỏi về Cordova / PhoneGap nên không cần quan tâm đến điều này (Trừ khi bạn muốn phát triển dựa trên 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':'')">

Tôi đã sử dụng cái này trong css của mình:

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

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

và đưa somenthing như thế này vào javascript:

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

nó hoạt động cho tôi cho các thiết bị di động (Ios8 và android). Nhưng tôi đã sử dụng jquery inputmask cho máy tính để bàn với kiểu văn bản đầu vào. Giải pháp này là một cách hay nếu mã của bạn chạy trên ie8.

Tính đến ngày hôm nay (2016), tôi đã sử dụng thành công 2 đoạn mã đó (cộng với chúng hoạt động tốt với Bootstrap4).

Nhập dữ liệu ở bên trái, trình giữ chỗ ở bên trái

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

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

Trình giữ chỗ biến mất khi nhấp vào

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

Theo tiêu chuẩn HTML :

Các thuộc tính nội dung sau không được chỉ định và không áp dụng cho phần tử: accept, alt, check, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multi, pattern, placeholder , size, src và width.

Nó hoạt động cho tôi:

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

Tôi đã sử dụng jQuery này: 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');
    });
});

Dựa trên câu trả lời deadproxor và Alessio, tôi sẽ chỉ thử sử dụng CSS:

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

Và nếu bạn cần ẩn chỗ dành sẵn sau khi viết nội dung nào đó vào đầu vào, chúng tôi có thể thử sử dụng các bộ chọn: hợp lệ và: không hợp lệ, nếu đầu vào của bạn là bộ chọn bắt buộc.

BIÊN TẬP

Đây là mã nếu bạn đang sử dụng được yêu cầu trong đầu vào của mình:

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>

Tìm thấy một cách tốt hơn để giải quyết vấn đề của bạn. Tôi nghĩ rằng điều này sẽ giúp bạn. khi được đặt tiêu điểm, hộp sẽ thay đổi loại thành văn bản để nó hiển thị trình giữ chỗ của bạn. khi tập trung vào, loại của nó thay đổi thành ngày để chế độ xem lịch sẽ được hiển thị.

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

Tôi lấy ý tưởng jbarlow, nhưng tôi đã thêm if vào hàm onblur để các trường chỉ thay đổi kiểu của nó nếu giá trị trống

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

Giải quyết vấn đề trong câu trả lời đúng hiện tại "nhấp vào trường hiển thị bàn phím ảo thay vì trình chọn ngày":

Sự cố là do Trình duyệt hoạt động theo kiểu đầu vào khi nhấp vào (= văn bản). Do đó, cần phải dừng việc lấy nét vào phần tử đầu vào (làm mờ) và sau đó khởi động lại lấy nét theo lập trình trên phần tử đầu vào đã được JS định nghĩa là type = date trong bước đầu tiên. Bàn phím hiển thị ở chế độ số điện thoại.

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

hãy thử giải pháp của tôi. Tôi sử dụng thuộc tính 'Required' để biết liệu đầu vào có được điền hay không và nếu không, tôi sẽ hiển thị văn bản từ thuộc tính '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
}

Tôi đã mất một lúc để tìm ra cái này, hãy để nó ở dạng type="text"và thêm onfocus="(this.type='date')", giống như được hiển thị ở trên.

Tôi thậm chí còn thích ý tưởng onBlur được đề cập ở trên

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

Hy vọng điều này sẽ giúp ích cho những ai không thu thập được những gì đang diễn ra ở trên

Để tóm tắt vấn đề nhập ngày tháng:

• Bạn phải hiển thị chúng (nghĩa là tránh hiển thị: không) nếu không giao diện người dùng đầu vào sẽ không được kích hoạt;
• một trình giữ chỗ mâu thuẫn với chúng (theo thông số kỹ thuật và vì chúng phải hiển thị một giao diện người dùng cụ thể);
• chuyển đổi chúng sang loại đầu vào khác trong thời gian không tập trung cho phép trình giữ chỗ, nhưng tiêu điểm sau đó sẽ kích hoạt giao diện người dùng đầu vào sai (bàn phím), ít nhất là trong một thời gian nhỏ, vì không thể hủy các sự kiện tiêu điểm.
• việc chèn (trước) hoặc thêm (sau) nội dung không ngăn giá trị nhập ngày tháng được hiển thị.

Giải pháp mà tôi tìm thấy để đáp ứng các yêu cầu đó là sử dụng thủ thuật thông thường để tạo kiểu cho các phần tử biểu mẫu gốc: đảm bảo phần tử được hiển thị nhưng không hiển thị và hiển thị kiểu mong đợi của nó thông qua nhãn được liên kết của nó . Thông thường, nhãn sẽ hiển thị dưới dạng đầu vào (bao gồm trình giữ chỗ), nhưng trên đó.

Vì vậy, một HTML như:

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

Có thể được tạo kiểu là:

.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;
}

Bất kỳ sự kiện nào (nhấp chuột, tiêu điểm) trên nhãn được liên kết như vậy sẽ được phản ánh trên chính trường và do đó kích hoạt giao diện người dùng nhập ngày.

Nếu bạn muốn thử nghiệm trực tiếp giải pháp như vậy, bạn có thể chạy phiên bản Angular này từ máy tính bảng hoặc thiết bị di động của mình.

VẬY những gì tôi quyết định làm cuối cùng đã có ở đây và nó hoạt động tốt trên tất cả các trình duyệt di động bao gồm iPhone và 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>

Ngày

Tôi đang làm việc với ionicframework và giải pháp do @Mumthezir cung cấp gần như hoàn hảo. Trong trường hợp nếu ai đó sẽ gặp vấn đề giống tôi (sau khi thay đổi, đầu vào vẫn được tập trung và khi cuộn, giá trị chỉ đơn giản biến mất) Vì vậy, tôi đã thêm onchange để tạo input.blur ()

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

Bạn có thể

1. đặt nó là loại văn bản
2. chuyển đổi sang ngày tập trung
3. bấm vào nó
4. ... để người dùng kiểm tra ngày
5. khi thay đổi lưu trữ giá trị
6. đặt đầu vào để nhập văn bản
7. đặt giá trị đầu vào kiểu văn bản thành giá trị được lưu trữ

như thế này...

$("#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" />

Đã tìm thấy một cách tốt hơn để xử lý khả năng hiểu cơ bản của người dùng bằng cách di chuột qua và mở trình chọn ngày khi nhấp:

<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">

Đồng thời ẩn mũi tên webkit và làm cho nó rộng 100% để che đi lần nhấp:

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;
}

Từ quan điểm Angular, tôi đã quản lý để đặt một trình giữ chỗ trong phần tử ngày loại đầu vào.

Trước hết, tôi đã định nghĩa css sau:

.placeholder {
    color: $text-grey;
  }

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

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

Lý do tại sao điều này là cần thiết là nếu nội dung css3 có màu khác với trình giữ chỗ bình thường, vì vậy tôi phải sử dụng một màu chung.

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

Sau đó, trong khuôn mẫu sử dụng thuộc tính ngày sinh của viewchild để có thể truy cập đầu vào này từ thành phần. Và đã xác định một biểu thức góc trên thuộc tính trình giữ chỗ, thuộc tính này sẽ quyết định xem chúng tôi có hiển thị trình giữ chỗ hay không. Đây là nhược điểm lớn của giải pháp, là bạn phải quản lý khả năng hiển thị của trình giữ chỗ.

@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">

Mã sửa đổi của mumthezir

Tôi ngạc nhiên khi chỉ có một câu trả lời với cách tiếp cận tương tự như cách tôi đã sử dụng.
Tôi lấy cảm hứng từ bình luận của @ Dtipson về câu trả lời của @Mumthezir VP.

Tôi sử dụng hai đầu vào cho việc này, một là đầu vào giả type="text"mà tôi đặt chỗ dành sẵn, đầu còn lại là trường thực type="date".
Trên mouseentersự kiện trên vùng chứa của họ, tôi ẩn đầu vào giả và hiển thị đầu vào thật, và tôi làm ngược lại với mouseleavesự kiện. Rõ ràng, tôi để hiển thị đầu vào thực nếu nó có một giá trị được đặt trên đó.
Tôi đã viết mã để sử dụng Javascript thuần nhưng nếu bạn sử dụng jQuery (tôi làm) thì rất dễ "chuyển đổi" nó.

// "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>

Tôi cũng đã thử nghiệm điều này trên điện thoại Android và nó hoạt động, khi người dùng nhấn vào trường, công cụ chọn ngày sẽ hiển thị. Điều duy nhất là, nếu đầu vào thực không có giá trị và người dùng đóng trình chọn ngày mà không chọn ngày, đầu vào sẽ vẫn hiển thị cho đến khi họ chạm vào bên ngoài nó. Không có sự kiện nào để lắng nghe để biết khi nào trình chọn ngày đóng cửa nên tôi không biết làm thế nào để giải quyết vấn đề đó.

Tôi không có thiết bị iOS để kiểm tra.

Mở rộng giải pháp của @ mvp với javascript không phô trương, đây là cách tiếp cận:

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') }
)

Tôi nghĩ tất cả những gì bạn phải làm là thay đổi mô hình để nói rằng trường ngày tháng là vô hiệu và sau đó đặt [Bắt buộc] vào nó nếu nó được yêu cầu. Nếu bạn làm điều này, văn bản giữ chỗ sẽ xuất hiện.

Này, vì vậy tôi đã gặp cùng một vấn đề tối qua và tìm ra sự kết hợp của tất cả câu trả lời của bạn và một số phép thuật lấp lánh đang làm rất tốt:

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');
            }
    });
});

Giải thích: Vì vậy, những gì đang xảy ra ở đây, trước hết là trong HTML , điều này khá đơn giản chỉ cần thực hiện một HMTL5-date-input cơ bản và đặt một trình giữ chỗ. Điểm dừng tiếp theo: CSS , chúng tôi đang đặt một: before-pseudo-element để giả mạo phần tử giữ chỗ của chúng tôi, nó chỉ lấy thuộc tính của phần tử giữ chỗ từ chính đầu vào. Tôi đã làm cho điều này chỉ khả dụng từ chiều rộng khung nhìn là 1024px - tại sao tôi sẽ nói sau. Và bây giờ là jQuery , sau khi cấu trúc lại một vài lần, tôi đã nghĩ ra đoạn mã này sẽ kiểm tra mọi thay đổi nếu có giá trị được đặt hay không, nếu không, nó sẽ (lại) thêm lớp, ngược lại .

BIẾT VẤN ĐỀ:

• đã xảy ra sự cố trong chrome với bộ chọn ngày mặc định của nó, đó là nội dung của truy vấn phương tiện. Nó sẽ thêm phần giữ chỗ trước điều mặc định 'dd.mm.yyyy'-thing. Bạn cũng có thể đặt trình giữ chỗ của ngày nhập thành 'ngày:' và điều chỉnh màu không có giá trị bên trong đầu vào ... đối với tôi, điều này dẫn đến một số vấn đề nhỏ hơn khác, vì vậy tôi đã không hiển thị nó trên 'lớn hơn 'màn hình

hy vọng rằng sẽ giúp! cheerio!

Nếu bạn chỉ quan tâm đến điện thoại di động:

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;');
});

Đây là một cách hack có thể xảy ra khác không sử dụng js và vẫn sử dụng css content. Lưu ý rằng vì :afterkhông được hỗ trợ trên một số trình duyệt cho đầu vào, chúng tôi cần chọn đầu vào theo cách khác, tương tự đối vớicontent 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>

Điều này phù hợp với tôi khi sử dụng nó làm phần tử đầu vào:

<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 này hiển thị một trình giữ chỗ vĩnh viễn. Giá trị đã chọn được hiển thị sau trình giữ chỗ.

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 */
    }
}

Tôi sử dụng giải pháp này cho một biểu mẫu Wordpress với plugin contact-form-7.

Không có giải pháp nào hoạt động chính xác đối với tôi trên Chrome trong iOS 12 và hầu hết chúng không được điều chỉnh để đối phó với nhiều lần nhập ngày tháng có thể xảy ra trên một trang. Tôi đã làm như sau, về cơ bản tạo một nhãn giả trên đầu vào ngày tháng và xóa nó khi nhấn. Tôi cũng sẽ xóa nhãn giả nếu chiều rộng khung nhìn vượt quá 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;
    }
}