Giriş türü için yer tutucunun gösterilmemesi = "tarih" alanı

Phonegap uygulaması yapıyorum. type="date"Aşağıda gösterildiği gibi giriş alanını denediğimde , iPhone'da beklediğim gibi tarih seçiciyi gösteriyor ancak verdiğim yer tutucuyu göstermiyor. Aynı sorunu burada SO'da buldum, ancak hiçbir yerde çözüm yok.

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

Uygun olmayabilir ... ama bana yardımcı oldu.

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

Mvp'nin yöntemini kullanırsanız ancak onblur olayını tekrar bir metin alanına dönüştürmek için eklerseniz, giriş alanı odağı kaybettiğinde yer tutucu metnin yeniden görünmesini sağlar. Bu sadece hack'i biraz daha hoş hale getiriyor.

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

Bu yardımcı olur umarım.

Aşağıdakileri kullanmaya son verdim.

Firefox yorumlarıyla ilgili olarak : Genel olarak, Firefox tarih türü girdiler için herhangi bir metin yer tutucusu göstermez. Ancak bu bir Cordova / PhoneGap sorusu olduğu için bu endişe olmamalıdır (FirefoxOS'a karşı geliştirmek istemiyorsanız).

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

Bunu css'imde kullandım:

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

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

ve javascript'e şöyle bir şey koyun:

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

benim için mobil cihazlar (Ios8 ve android) için çalışıyor. Ancak masaüstü için giriş metin türü ile jquery giriş maskesi kullandım. Bu çözüm, kodunuzun ie8 üzerinde çalıştırılması için güzel bir yoldur.

Bugün (2016) itibariyle, bu 2 parçacığı başarıyla kullandım (artı Bootstrap4 ile harika çalışıyorlar).

Solda veri girişi, solda yer tutucu

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

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

Yer tutucu tıklandığında kaybolur

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

Göre HTML standardı :

Aşağıdaki içerik nitelikleri belirtilmemeli ve öğeye uygulanmamalıdır: kabul, alt, işaretli, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src ve genişlik.

Benim için çalışıyor:

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

Bu katiyen jQuery'yi kullandım: 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 ve Alessio yanıtlarına dayanarak, yalnızca CSS kullanmayı denerdim:

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

Girişe bir şey yazdıktan sonra yer tutucuyu görünmez yapmanız gerekiyorsa, girişiniz gerekliyse: valid ve: geçersiz seçicileri kullanmayı deneyebiliriz.

DÜZENLE

Girişinizde gerekli olan kodu kullanıyorsanız:

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>

Sorununuzu çözmenin daha iyi bir yolunu buldum. Bunun size yardımcı olacağını düşünüyorum. odaklandığınızda, kutu metni metne dönüştürür, böylece yer tutucunuzu gösterir. odaklanıldığında, türü tarihe dönüşür, böylece takvim görünümü gösterilir.

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

Jbarlow fikrini aldım, ancak onblur işlevine bir if ekledim, böylece alanlar yalnızca değer boşsa türünü değiştirir

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

Sorunu mevcut doğru cevapta ele almak "alana tıklamak tarih seçici yerine ekran klavyesini gösterir":

Sorun, Tarayıcının (= metin) tıklandığında giriş türüne göre davranmasından kaynaklanır. Bu nedenle, girdi öğesine odaklanmayı (bulanıklaştırmayı) durdurmak ve daha sonra, ilk adımda JS tarafından tür = tarih olarak tanımlanan giriş öğesine programlı olarak odaklamayı yeniden başlatmak gerekir. Klavye telefon numarası modunda görüntülenir.

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

çözümümü dene. Girişin doldurulup doldurulmadığını öğrenmek için "gerekli" özelliğini kullanıyorum ve yoksa "yer tutucu" özelliğinden gelen metni gösteriyorum

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

Bunu çözmek biraz zaman aldı, olduğu gibi bırak type="text"ve onfocus="(this.type='date')"yukarıda gösterildiği gibi ekle .

Yukarıda bahsedilen onBlur fikrini bile beğendim

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

Umarım bu, yukarıda neler olup bittiğini tam olarak anlamayan herkese yardımcı olur

Tarih giriş problemini özetlemek için:

• Bunları görüntülemelisiniz (yani görüntülemekten kaçının: yok) aksi takdirde giriş kullanıcı arayüzü tetiklenmeyecektir;
• bir yer tutucu onlarla çelişir (spesifikasyona göre ve belirli bir UI görüntülemeleri gerektiğinden);
• odaklanmamış zaman için bunları başka bir giriş türüne dönüştürmek yer tutuculara izin verir, ancak odaklanma daha sonra en azından küçük bir süre için yanlış giriş kullanıcı arayüzünü (klavye) tetikler, çünkü odak olayları iptal edilemez.
• içerik eklemek (önce) veya eklemek (sonra) tarih giriş değerinin görüntülenmesini engellemez.

Bu gereksinimleri karşıladığını bulduğum çözüm, yerel form öğelerini biçimlendirmek için olağan hileyi kullanmak: öğenin görüntülendiğinden ancak görünür olmadığından emin olun ve ilişkili etiketi aracılığıyla beklenen stilini görüntüleyin . Tipik olarak, etiket giriş olarak (bir yer tutucu dahil), ancak onun üzerinde görüntülenir.

Öyleyse, şöyle bir HTML:

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

Şu şekilde biçimlendirilebilir:

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

Bu tür bir ilişkili etiketteki herhangi bir olay (tıklama, odaklanma) alanın kendisine yansıtılacak ve bu nedenle tarih girişi kullanıcı arayüzünü tetikleyecektir.

Böyle bir çözümü canlı olarak test etmek isterseniz, bu Angular sürümünü tabletinizden veya cep telefonunuzdan çalıştırabilirsiniz.

Sonunda yapmaya karar verdiğim şey burada ve iPhone'lar ve Android'ler dahil tüm mobil tarayıcılarda iyi çalışıyor.

$(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>

tarih

@ Mumthezir tarafından sağlanan iyonik çerçeve ve çözüm ile çalışıyorum neredeyse mükemmel. Birinin benimle aynı problemi olması durumunda (değişiklikten sonra, girdi hala odaklıdır ve kaydırırken değer kaybolur) Bu yüzden input.blur () yapmak için onchange ekledim.

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

Yapabilirsin

1. metin yazın olarak ayarla
2. odakta tarihe dönüştür
3. üzerine tıkla
4. ... kullanıcının tarihi kontrol etmesine izin ver
5. Değişimde değeri saklayın
6. metin yazmak için girişi ayarla
7. metin türü girdi değerini depolanan değere ayarla

bunun gibi...

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

Fareyle üzerine gelindiğinde ve tıklandığında tarih seçiciyi açarak kullanıcının temel kavramasını işlemenin daha iyi bir yolunu buldum:

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

Ayrıca webkit okunu gizleyin ve tıklamayı kapsayacak şekilde% 100 geniş yapın:

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

Açısal bakış açısından, girdi türü tarih öğesine bir yer tutucu koymayı başardım.

Öncelikle aşağıdaki css'i tanımladım:

.placeholder {
    color: $text-grey;
  }

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

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

Bunun gerekli olmasının nedeni, eğer css3 içeriği normal yer tutucudan farklı bir renge sahipse, bu yüzden ortak bir tane kullanmak zorunda kaldım.

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

Daha sonra şablonda, bileşenden bu girdiye erişebilmek için bir viewchild birthDate özniteliği kullanıldı. Ve yer tutucu özelliği üzerinde, yer tutucuyu gösterip göstermeyeceğimize karar verecek açısal bir ifade tanımlayın. Bu, çözümün en büyük dezavantajı, yer tutucunun görünürlüğünü yönetmeniz gerektiğidir.

@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'in revize kodu

Kullandığıma benzer bir yaklaşıma sahip tek bir yanıt olduğuna şaşırdım.
@ Dtipson'ın @Mumthezir Başkan Yardımcısı'nın cevabına ilişkin yorumundan ilham aldım.

Bunun için iki giriş kullanıyorum, biri type="text"yer tutucuyu ayarladığım sahte bir girdi , diğeri ise gerçek alan type="date".
On mouseenteronların kap üzerine olay, sahte girişini gizlemek ve gerçek olanı gösteririz ve ben tersini yapmak mouseleavedurumunda. Açıkçası, üzerinde ayarlanmış bir değer varsa gerçek girdiyi görünür bırakırım.
Kodu saf Javascript kullanmak için yazdım ama jQuery kullanıyorsanız (yaparım) onu "dönüştürmek" çok kolaydır.

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

Bunu bir Android telefonda da test ettim ve kullanıcı tarih seçicinin gösterildiği alana dokunduğunda çalışıyor. Tek sorun, gerçek girdinin hiçbir değeri yoksa ve kullanıcı tarih seçiciyi bir tarih seçmeden kapatırsa, girdi, dışarıya dokunana kadar görünür kalacaktır. Tarih seçicinin ne zaman kapandığını bilmek için dinlenecek bir olay yok, bu yüzden bunu nasıl çözeceğimi bilmiyorum.

Test edebileceğim bir iOS cihazım yok.

@ Mvp'nin çözümünü göze çarpmayan javascript göz önünde bulundurarak genişleten yaklaşım şu şekildedir:

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

Bence tek yapmanız gereken, tarih alanının boş değer atanabilir olduğunu söylemek için modeli değiştirmek ve gerekirse üzerine [Gerekli] yazmaktır. Bunu yaparsanız, yer tutucu metin görünür.

Hey, dün gece aynı sorunla karşılaştım ve tüm cevabınızla bazı ışıltılı sihrin birleşiminin iyi bir iş çıkardığını anladım:

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

Açıklama: Öyleyse, burada, her şeyden önce HTML'de olup bitenler, sadece basit bir HMTL5-tarih-girişi yapmak ve bir yer tutucu ayarlamak oldukça basittir. Sonraki durak: CSS , yer tutucumuzu taklit etmek için a: before-pseudo-element ayarlıyoruz, sadece yer tutucunun niteliğini girdinin kendisinden alır. Bunu yalnızca 1024px görüntü alanı genişliğinden aşağıya indirdim - neden daha sonra anlatacağım. Ve şimdi jQuery , birkaç kez yeniden düzenleme yaptıktan sonra, bir değer setinin olup olmadığını her değişikliği kontrol edecek bu kod parçasını buldum, yoksa sınıfı (yeniden) ekleyecektir, tersi .

BİLİNEN SORUNLAR:

• Chrome'da varsayılan tarih seçiciyle ilgili bir sorun var, medya sorgusu bunun için. Varsayılan 'gg.aa.yyyy' şeyinin önüne yer tutucuyu ekleyecektir. Ayrıca tarih girdisinin yer tutucusunu 'tarih:' olarak ayarlayabilir ve girdinin içinde hiçbir değer olmaması durumunda rengi ayarlayabilirsiniz ... benim için bu daha küçük sorunlara neden oldu, bu yüzden onu 'daha büyük' ​​olarak göstermedim ekranlar

umarım yardımcı olur! şerefe!

Yalnızca mobil ile ilgileniyorsanız:

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

İşte js kullanmayan ve hala css kullanan bir başka olası hack content. Olarak Not olduğu :afteriçin girişler için bazı tarayıcıda desteklenmeyen, başka şekilde girişini seçmek için Gereksiz, aynı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>

Bu benim için bunu giriş öğesi olarak kullanarak işe yarar:

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

Bu CSS, kalıcı bir yer tutucuyu gösterir. Seçilen değer yer tutucudan sonra gösterilir.

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

Bu çözümü contact-form-7 eklentisine sahip bir Wordpress formu için kullanıyorum.

Çözümlerden hiçbiri, iOS 12'de Chrome'da benim için doğru şekilde çalışmıyordu ve çoğu, bir sayfadaki olası çoklu tarih girişleriyle başa çıkmak için uyarlanmadı. Aşağıdakini yaptım, bu temelde tarih girişi üzerinde sahte bir etiket oluşturuyor ve dokunulduğunda kaldırıyor. Görüntü alanı genişliği 992 pikselden fazlaysa sahte etiketi de kaldırıyorum.

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