Tidak menampilkan placeholder untuk bidang input type = "date"

Saya melakukan aplikasi peta telepon. Ketika saya mencoba type="date"bidang input seperti yang ditunjukkan di bawah ini, ini menunjukkan pemilih tanggal di iPhone seperti yang saya harapkan tetapi tidak menunjukkan placeholder yang telah saya berikan. Saya menemukan masalah yang sama di sini di SO, tetapi tidak ada solusi di mana pun.

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

Ini mungkin tidak sesuai ... tapi membantu saya.

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

Jika Anda menggunakan metode mvp tetapi menambahkan acara onblur untuk mengubahnya kembali ke bidang teks sehingga teks placeholder muncul lagi saat bidang masukan kehilangan fokus. Itu hanya membuat peretasan sedikit lebih baik.

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

Semoga ini membantu.

Saya akhirnya menggunakan yang berikut ini.

Mengenai komentar Firefox : Umumnya, Firefox tidak akan menampilkan placeholder teks apa pun untuk tanggal jenis masukan. Tetapi karena ini adalah pertanyaan Cordova / PhoneGap, ini seharusnya tidak menjadi masalah (Kecuali Anda ingin mengembangkan melawan 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':'')">

Saya menggunakan ini di css saya:

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

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

dan memasukkan sesuatu seperti ini ke dalam javascript:

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

ini berfungsi untuk saya untuk perangkat seluler (Ios8 dan android). Tapi saya menggunakan jquery inputmask untuk desktop dengan tipe teks input. Solusi ini adalah cara yang bagus jika kode Anda berjalan di ie8.

Sampai hari ini (2016), saya telah berhasil menggunakan 2 potongan tersebut (ditambah mereka bekerja dengan baik dengan Bootstrap4).

Masukkan data di sebelah kiri, placeholder di sebelah kiri

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

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

Placeholder menghilang saat mengklik

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

Menurut standar HTML :

Atribut konten berikut tidak boleh ditentukan dan tidak berlaku untuk elemen: terima, alt, diperiksa, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src, dan lebar.

Ini bekerja untuk saya:

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

Saya menggunakan sedikit pun jQuery ini: 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');
    });
});

Berdasarkan jawaban deadproxor dan Alessio, saya hanya akan mencoba menggunakan CSS:

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

Dan jika Anda perlu membuat placeholder tidak terlihat setelah menulis sesuatu di masukan, kita dapat mencoba menggunakan pemilih: valid dan: tidak valid, jika masukan Anda diperlukan.

EDIT

Berikut kode jika Anda menggunakan diperlukan dalam masukan Anda:

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>

Temukan cara yang lebih baik untuk menyelesaikan masalah Anda. Saya pikir ini akan membantu Anda. saat difokuskan, kotak akan berubah tipe menjadi teks sehingga akan menampilkan placeholder Anda. ketika difokuskan, jenisnya berubah menjadi tanggal sehingga tampilan kalender akan ditampilkan.

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

Saya mengambil ide jbarlow, tetapi saya menambahkan jika dalam fungsi onblur sehingga bidang hanya mengubah jenisnya jika nilainya kosong

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

Menekankan masalah dalam jawaban yang benar saat ini "mengklik bidang akan menampilkan keyboard di layar, bukan pemilih data":

Masalah ini disebabkan oleh Browser yang berperilaku sesuai dengan jenis input saat mengklik (= teks). Oleh karena itu, penting untuk berhenti memfokuskan pada elemen input (blur) dan kemudian memulai kembali fokus secara terprogram pada elemen input yang didefinisikan sebagai type = date oleh JS pada langkah pertama. Keyboard ditampilkan dalam mode nomor telepon.

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

coba solusi saya. Saya menggunakan atribut 'diperlukan' untuk mengetahui apakah input sudah diisi dan jika tidak, saya menampilkan teks dari atribut '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
}

Butuh waktu beberapa saat untuk memikirkan yang satu ini, biarkan saja type="text", dan tambahkanonfocus="(this.type='date')" , seperti yang ditunjukkan di atas.

Saya bahkan menyukai ide onBlur yang disebutkan di atas

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

Semoga ini bisa membantu siapa pun yang tidak cukup memahami apa yang terjadi di atas

Untuk meringkas masalah input tanggal:

• Anda harus menampilkannya (yaitu, hindari display: none) jika tidak, UI input tidak akan dipicu;
• placeholder bertentangan dengan mereka (sesuai dengan spesifikasi, dan karena mereka harus menampilkan UI tertentu);
• mengonversinya ke jenis input lain untuk waktu yang tidak fokus memungkinkan placeholder, tetapi fokus kemudian memicu UI input (keyboard) yang salah, setidaknya untuk waktu yang singkat, karena peristiwa fokus tidak dapat dibatalkan.
• memasukkan (sebelum) atau menambahkan (setelah) konten tidak mencegah nilai input tanggal untuk ditampilkan.

Solusi yang saya temukan untuk memenuhi persyaratan tersebut adalah dengan menggunakan trik biasa untuk memberi gaya pada elemen bentuk asli: pastikan elemen ditampilkan tetapi tidak terlihat, dan tampilkan gaya yang diharapkan melalui label yang terkait . Biasanya, label akan ditampilkan sebagai input (termasuk placeholder), tetapi di atasnya.

Jadi, HTML seperti:

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

Bisa ditata sebagai:

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

Setiap peristiwa (klik, fokus) pada label terkait seperti itu akan tercermin di bidang itu sendiri, dan memicu UI masukan tanggal.

Jika Anda ingin menguji solusi seperti itu secara langsung, Anda dapat menjalankan versi Angular ini dari tablet atau ponsel Anda.

JADI apa yang akhirnya saya putuskan untuk dilakukan ada di sini dan berfungsi dengan baik di semua browser seluler termasuk iPhone dan 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>

Tanggal

Saya bekerja dengan kerangka ionik dan solusi yang disediakan oleh @Mumthezir hampir sempurna. Jika seseorang memiliki masalah yang sama dengan saya (setelah perubahan, input masih fokus dan ketika menggulir, nilai menghilang begitu saja) Jadi saya menambahkan onchange untuk membuat input.blur ()

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

Kamu bisa

1. atur sebagai teks tipe
2. ubah menjadi fokus saat ini
3. buat klik di atasnya
4. ... biarkan pengguna memeriksa tanggal
5. pada perubahan, simpan nilainya
6. atur masukan untuk mengetik teks
7. setel nilai input jenis teks ke nilai yang disimpan

seperti ini...

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

Temukan cara yang lebih baik untuk menangani pemahaman dasar pengguna dengan gerakan mouse dan membuka datepicker dengan mengklik:

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

Sembunyikan juga panah webkit dan buat lebar 100% untuk menutupi klik:

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

Dari sudut pandang sudut saya berhasil menempatkan placeholder di elemen tanggal tipe masukan.

Pertama-tama saya mendefinisikan css berikut:

.placeholder {
    color: $text-grey;
  }

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

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

Alasan mengapa ini diperlukan adalah jika konten css3 memiliki warna yang berbeda dari placeholder normal, jadi saya harus menggunakan yang umum.

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

Kemudian pada template digunakan atribut viewchild birthDate, untuk dapat mengakses input ini dari komponen. Dan mendefinisikan ekspresi sudut pada atribut placeholder, yang akan memutuskan apakah kita menampilkan placeholder atau tidak. Ini adalah kelemahan utama dari solusinya, yaitu Anda harus mengelola visibilitas placeholder.

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

Kode mumthezir yang direvisi

Saya terkejut hanya ada satu jawaban dengan pendekatan yang mirip dengan yang saya gunakan.
Saya mendapat inspirasi dari komentar @Dtipson di jawaban VP @Mumthezir.

Saya menggunakan dua input untuk ini, satu adalah input palsu yang saya gunakan untuk type="text"mengatur placeholder, yang lainnya adalah bidang nyata type="date".
Pada mouseenteracara di wadah mereka, saya menyembunyikan masukan palsu dan menunjukkan yang asli, dan saya melakukan yang sebaliknya pada mouseleaveacara tersebut. Jelas, saya membiarkan input nyata terlihat jika memiliki nilai yang ditetapkan di atasnya.
Saya menulis kode untuk menggunakan Javascript murni tetapi jika Anda menggunakan jQuery (saya lakukan), sangat mudah untuk "mengubahnya".

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

Saya menguji ini juga pada ponsel Android dan berhasil, ketika pengguna mengetuk bidang pembuat data ditampilkan. Satu-satunya hal adalah, jika input sebenarnya tidak memiliki nilai dan pengguna menutup datepicker tanpa memilih tanggal, input akan tetap terlihat sampai mereka mengetuk di luarnya. Tidak ada acara untuk didengarkan untuk mengetahui kapan datepicker ditutup jadi saya tidak tahu bagaimana menyelesaikannya.

Saya tidak memiliki perangkat iOS untuk mengujinya.

Memperluas solusi @ mvp dengan javascript yang tidak mengganggu, berikut pendekatannya:

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

Saya pikir yang harus Anda lakukan adalah mengubah model untuk mengatakan bidang tanggal nullable dan kemudian meletakkan [Wajib] di atasnya jika diperlukan. Jika Anda melakukan ini, teks placeholder tidak muncul.

Hei, jadi saya mengalami masalah yang sama tadi malam dan menemukan kombinasi dari semua jawaban Anda dan beberapa keajaiban yang berkilauan melakukan pekerjaan dengan baik:

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

Penjelasan: Jadi, apa yang terjadi di sini, pertama-tama di HTML , ini cukup sederhana hanya dengan melakukan input-tanggal-HMTL5 dasar dan menetapkan placeholder. Pemberhentian selanjutnya: CSS , kami menyetel: before-pseudo-element untuk memalsukan placeholder kami, ini hanya mengambil atribut placeholder dari input itu sendiri. Saya membuat ini hanya tersedia dari lebar viewport 1024px - mengapa saya akan memberi tahu nanti. Dan sekarang jQuery , setelah refactoring beberapa kali saya menemukan sedikit kode ini yang akan memeriksa setiap perubahan apakah ada nilai yang ditetapkan atau tidak, jika tidak maka akan (kembali) menambahkan kelas, sebaliknya .

TAHU ISU:

• ada masalah di chrome dengan pemilih tanggal default-nya, untuk itulah kueri media itu. Ini akan menambahkan placeholder di depan default 'dd.mm.yyyy'-thing. Anda juga dapat mengatur placeholder dari input-tanggal ke 'tanggal:' dan menyesuaikan pemetikan warna tanpa nilai di dalam input ... bagi saya ini mengakibatkan beberapa masalah lain yang lebih kecil jadi saya pergi dengan tidak menampilkannya di 'lebih besar 'layar

semoga membantu! cheerio!

Jika Anda hanya peduli dengan seluler:

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

Berikut adalah kemungkinan peretasan lain yang tidak menggunakan js dan masih menggunakan css content. Perhatikan bahwa karena :aftertidak didukung pada beberapa browser untuk input, kita perlu memilih input dengan cara lain, sama untukcontent 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>

Ini berfungsi untuk saya menggunakan ini sebagai elemen input:

<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 ini menunjukkan placeholder permanen. Nilai yang dipilih ditampilkan setelah placeholder.

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

Saya menggunakan solusi ini untuk formulir Wordpress dengan plugin contact-form-7.

Tidak ada solusi yang berfungsi dengan benar untuk saya di Chrome di iOS 12 dan sebagian besar tidak disesuaikan untuk mengatasi kemungkinan input beberapa tanggal pada halaman. Saya melakukan hal berikut, yang pada dasarnya membuat label palsu di atas input tanggal dan menghapusnya di ketuk. Saya juga menghapus label palsu jika lebar viewport melebihi 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;
    }
}