Tidak menampilkan placeholder untuk bidang input type = "date"


120

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


Jawaban:


156

Ini mungkin tidak sesuai ... tapi membantu saya.

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


7
Sepertinya fitur yang bagus, namun mengklik bidang tersebut menunjukkan keyboard pada layar, bukan pemilih data. Usaha yang bagus.
Mathijs Segers

2
@MathijsSegers sudahkah Anda menemukan solusi yang TIDAK menampilkan keyboard? Saya mencoba solusi ini di sini, tetapi di iOS 6, 7 dan 8, menunjukkan keyboard sebentar dan kemudian menampilkan datepicker.
Jabel Márquez

7
Ya, itu menjijikkan. Saya menambahkan rentang dengan tampilan bidang teks di bidang tanggal yang membuatnya hanya terlihat di iOS. Indeks z dari datepicker lebih tinggi dari span tetapi alpha 0,01 di css. Onclick saya akan mengungkapkan bidang tanggal. Ini berhasil tetapi agak buruk.
Mathijs Segers

4
Saya perhatikan bahwa ini tidak berfungsi pada perangkat iOS, apakah seseorang punya solusi untuk ini?
Mikkel Fennefoss

3
Untuk aplikasi cordova, gunakan acara onmouseenter daripada acara onfocus , kemudian, pemilih tanggal akan terbuka pada klik pertama
saya

89

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.


1
Terima kasih! Ini bekerja dengan sempurna untuk saya! Bolehkah saya menyarankan agar bidang ini dinonaktifkan, lalu hapus nonaktifkan saat diklik? Saya bekerja di Angular, dan menulis fungsi cakupan untuk mengubah jenisnya, dan menghapus penonaktifan, itu akan menghentikan bug aneh ketika entah bagaimana berfokus pada bidang teks
Torch2424

2
Solusi yang jauh lebih baik. Terima kasih
Profstyle

3
Saya bisa melihat placeholder saat tidak fokus, tetapi untuk mendapatkan pemilih tanggal, saya perlu mengkliknya dua kali. Bagaimana saya bisa mengatasinya?
Suraj

1
Solusi terbaik untuk yang saya temukan, terima kasih banyak
Fran Sandi

3
bagus! solusi yang sangat tepat. : D berharap segera HTML5 atau HTML6 akan memungkinkan placeholder pada tanggal. Tapi untuk saat ini, ini adalah penyelesaian yang sangat bagus. : D
jehzlau

35

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':'')">


1
Versi ini tidak main-main dengan kelas lain<input type="date" placeholder="MY PLACEHOLDER" onchange="this.classList.toggle('has-value',this.value);">
achairapart

jawaban yang bagus bro, kamu yang terbaik. Saya mencari jawabannya sampai sakit kepala. terima kasih
Roman Traversine

saya menggunakan ini dan menambahkan input[type="date"]:not(:focus):not(.has-value):beforeuntuk menunjukkan format saat input difokuskan (untuk orang yang mengetik tanggal alih-alih memilih)
Marco somefox

20

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.


Pilihan terbaik di sini untuk saya di Android! Bagus!
Zappescu

Luar biasa! Hanya perlu menyetel status awal kelas "penuh", misalnya jika Anda mengedit tanggal yang ada.
bjnord

Saya menyarankan agar kami menggunakan color: #aaauntuk tampilan seperti placeholder di iOS. color: lightgrayterlalu ringan.
Rockallite

Jawaban yang bagus! Anda membuat kode jQuery sedikit lebih siap pakai menggunakan toggleClass: $("#myel").on( "input" , function(){ $(this).toggleClass( "full" , $(this).val().length > 0 ); });
Mike

18

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

Bekerja dengan bersih dan tanpa masalah.
pengguna12379095

11

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.


lalu, apa yang harus saya lakukan?
Mumthezir VP

2
@mvp, Anda tidak boleh menggunakan atribut placeholder, dan meletakkan elemen <label> yang terkait dengan masukan [type = date].
int32_t

haruskah itu terlihat seperti placeholder?
Mumthezir VP

2
Label dan placeholder adalah 2 hal yang berbeda. Saya tidak mengerti apa yang Anda sarankan di sini.
Adeynack

2
Ini satu-satunya jawaban yang benar. +1. Ingin tahu ada apa dengan orang-orang! Baru saja menemukan tindak lanjut ini dari target penipuan dan kagum dengan jumlah suara pada jawaban yang diterima :( Spesifikasi dengan jelas mengatakan kata-kata tidak boleh ditentukan dan tidak berlaku , tetap saja orang ingin memasukkan ini ke dalam aplikasi web jelek mereka .
Abhitalks

10

Ini bekerja untuk saya:

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

3
Satu-satunya masalah dengan ini adalah menghapus placeholder ketika Anda telah memilih tanggal. Dudukan tempat tidak dilepas.
egr103

Di iOS 9.3, Safari akan membuat :afterelemen semu menghilang saat tanggal dipilih. Jadi tidak perlu menghapus placeholder
Rockallite

2
Cukup tambahkan onfocus="(this.placeholder='')"untuk menghapus placeholder setelah tanggal dipilih.
siklik

Luar biasa !!! Bekerja untuk saya juga, menambahkan fokus yang disarankan @RobbieNolan bekerja dengan sempurna.
Bruno De Faria

9

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

tolong tambahkan penjelasan mengapa ini akan membantu
zohar

@Davide Russo Abram: Tolong beri penjelasan, bagaimana cara kerjanya?
jsduniya

9

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>


9

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

Selamat datang di Stack Overflow! Harap coba berikan deskripsi yang bagus tentang cara kerja solusi Anda. Lihat: Bagaimana cara menulis jawaban yang baik? . Terima kasih
sɐunıɔ ןɐ qɐp

6

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

3

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();">

Bahkan dengan kode ini, di iOS (diuji pada iOS 6, 7 dan 8) menunjukkan keyboard sejenak dan kemudian menampilkan datepicker. Ada cara untuk TIDAK menampilkan keyboard?
Jabel Márquez

@ JabelMárquez Anda dapat menggunakan readonly = "true" untuk menghentikan tampilan keyboard ... jadi kira-kira seperti ini: <input type = "text" name = "date" value = "" placeholder = "Date" readonly = "true" onfocus = "this.removeAttribute ('readonly'); this.type = 'date'; this.setAttribute ('onfocus', ''); this.blur (); this.focus ();">. Telah berhasil untuk saya.
pschueller

3

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
}

1
hh / bb / tttt masih ditampilkan di Chrome (70).
schankam

2

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


2

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.


2

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


2

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

2

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


2

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

1

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

1

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

Kode mumthezir yang direvisi


1

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.


0

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

0

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.


0

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!


0

Jika Anda hanya peduli dengan seluler:

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

0

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

Memposting kode tanpa penjelasan apa pun tidak diterima di sini. Harap edit postingan Anda.
Cid

0

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>


0

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.


awalan moz ini tidak berfungsi di FF untuk saya: /
saomi

0

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;
    }
}
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.