Nie jest wyświetlany symbol zastępczy dla pola input type= "date"

Jeśli używasz metody mvp, ale dodajesz Zdarzenie onblur, aby zmienić je z powrotem na pole tekstowe, aby tekst zastępczy pojawił się ponownie, gdy pole wejściowe straci fokus. To tylko sprawia, że hack jest trochę milszy.

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

Skończyło się na użyciu następujących.

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

Użyłem tego w moim css:

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

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

I umieść coś takiego w javascript:

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

Działa dla mnie na urządzenia mobilne(Ios8 i android). Ale użyłem jQuery inputmask dla pulpitu z tekstem wejściowym. To rozwiązanie jest dobrym sposobem, jeśli twój kod działa na ie8.

Od dzisiaj (2016) z powodzeniem używam tych 2 fragmentów (plus świetnie działają z Bootstrap4).

Dane wejściowe po lewej, symbol zastępczy po lewej

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

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

Symbol zastępczy zniknie po kliknięciu

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

Użyłem tego whit jQuery: http://jsfiddle.net/daviderussoabram/65w1qhLz/

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

Zgodnie z standardem HTML :

Następujące atrybuty zawartości nie mogą być określone i nie mają zastosowania do elementu: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder, size, src i width.

Bazując na odpowiedziach deadproxor i Alessio, spróbowałbym użyć tylko CSS:

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

I jeśli chcesz, aby Element Zastępczy był niewidoczny po zapisaniu czegoś w wejściu, możemy spróbować użyć selektorów: valid i: invalid, jeśli twoje wejście jest wymagane.

EDIT

Tutaj Kod, jeśli używasz wymaganego w swoim wejściu:

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>

U mnie działa:

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

Adresowanie problemu w bieżącej poprawnej odpowiedzi "kliknięcie pola pokazuje klawiaturę ekranową zamiast datepickera":

Problem jest spowodowany przez przeglądarkę zachowującą się zgodnie z typem wejścia podczas klikania (=tekst). Dlatego konieczne jest zaprzestanie ustawiania ostrości na elemencie wejściowym (blur), a następnie ponowne programowanie ustawiania ostrości na elemencie wejściowym, który został zdefiniowany jako type=date przez JS w pierwszym kroku. Klawiatura wyświetla się w trybie numerycznym.

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

Aby podsumować problem wejścia daty:

• musisz je wyświetlić (np. unikać display: none) w przeciwnym razie interfejs wejściowy nie zostanie uruchomiony ;
W przeciwieństwie do innych systemów, które nie są w pełni kompatybilne z innymi systemami, nie są w pełni kompatybilne z innymi systemami.]}
• konwersja ich na inny typ wejścia na czas nieostry do pozwala na wstawianie elementów zastępczych, ale focus uruchamia niewłaściwy interfejs wejściowy (klawiatura), przynajmniej przez krótki czas, ponieważ zdarzenia focus nie mogą być odwołane.
• wstawianie (przed) lub dodawanie (po) zawartości nie uniemożliwia wyświetlenia wartości wejściowej daty.

Rozwiązaniem, które znalazłem, aby spełnić te wymagania, jest użycie zwykłej sztuczki do stylizacji natywnych elementów formularza : upewnij się, że element jest wyświetlany, ale nie widoczny, i wyświetla oczekiwany styl za pomocą powiązanej etykiety . Zazwyczaj etykieta będzie wyświetlana jako wejście (łącznie z symbolem zastępczym), ale nad nią.

Więc HTML like:

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

Może być stylizowane na:

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

Każde zdarzenie (kliknięcie, skupienie) na powiązanej etykiecie zostanie odzwierciedlone w samym polu, a więc uruchomi interfejs wprowadzania daty.

Jeśli chcesz przetestować takie rozwiązanie na żywo, możesz uruchomić tę wersję kątową ze swojego tabletu lub telefonu komórkowego.

Więc to, co postanowiłem w końcu zrobić, jest tutaj i działa dobrze na wszystkich przeglądarkach mobilnych, w tym na iPhone ' ach i androidach.

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

Data

Im praca z ionicframework i rozwiązanie dostarczone przez @ Mumthezir jest prawie idealny. W przypadku, gdyby ktoś miał taki sam problem jak ja (po zmianie, wejście jest nadal skupione, a podczas przewijania wartość po prostu zanika), więc dodałem onchange, aby wprowadzić.blur ()

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

Możesz

1. Ustaw jako tekst typu
2. Konwertuj na datę na ostrość
3. make click on it
4. ...let user check date
5. przy zmianie zapisz wartość
6. ustaw wejście na typ tekstu
7. ustaw wartość wejściową typu tekstowego na zapisaną wartość

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

Zajęło mi trochę czasu zastanawianie się nad tym, zostaw to jako type="text" i dodaj onfocus="(this.type='date')", tak jak pokazano powyżej.

Podoba mi się nawet wspomniany powyżej pomysł onBlur

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

Mam nadzieję, że pomoże to każdemu, kto nie do końca zrozumiał, co dzieje się powyżej

Z kątowego punktu widzenia udało mi się umieścić symbol zastępczy w elemencie daty typu wejściowego.

Najpierw zdefiniowałem następujący css:

.placeholder {
    color: $text-grey;
  }

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

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

Powodem, dla którego jest to konieczne, jest to, że jeśli zawartość css3 ma inny kolor niż zwykły element zastępczy, więc musiałem użyć wspólnego.

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

Następnie w szablonie użyto atrybutu viewchild birthDate, aby móc uzyskać dostęp do tego wejścia z komponentu. I zdefiniował wyrażenie kątowe na atrybucie placeholder, który zdecyduje, czy pokażemy symbol zastępczy, czy nie. Jest to główna wada rozwiązania, polega na tym, że musisz zarządzać widocznością elementu zastępczego.

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

Poprawiony kod mumthezir

Rozszerzenie rozwiązania @ mvp z dyskretnym javascript w umyśle, oto podejście:

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

Myślę, że wszystko, co musisz zrobić, to zmienić model, aby powiedzieć, że pole daty jest nullable, a następnie umieścić [wymagane] na nim, jeśli jest to wymagane. Jeśli to zrobisz, pojawi się tekst zastępczy.

Hej więc wpadłem wczoraj na ten sam problem i wymyśliłem kombinację wszystkich twoich odpowiedzi i jakiejś iskrzącej magii robią dobrą robotę:

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

Wyjaśnienie: Tak więc, co się tutaj dzieje, przede wszystkim w HTML , jest to dość proste, po prostu robiąc podstawowe wejście HMTL5-date i ustawiając symbol zastępczy. Następny przystanek: CSS, ustawiamy a: before-pseudo-element, aby sfałszować nasz placeholder, po prostu pobiera atrybut placeholder z samego wejścia. Zrobiłem to tylko dostępne w dół z szerokości viewport 1024px - dlaczego im powiem później. A teraz jQuery , po kilkukrotnym refaktoryzacji wpadłem na ten bit kodu, który będzie sprawdzał przy każdej zmianie, czy jest ustawiona wartość, czy nie, jeśli jej nie będzie, to (ponownie)doda klasę, vice-versa.

ZNAJ PROBLEMY:

• jest problem w chrome z domyślnym selektorem daty, To do czego służy Zapytanie o media. Doda on symbol zastępczy przed domyślną 'dd.mm. yyyy' - rzecz. można również ustawić symbol zastępczy daty wejścia na 'date:' i dostosować kolor okrywy bez wartości wewnątrz wejścia...dla mnie spowodowało to kilka innych mniejszych problemów, więc poszedłem z po prostu nie pokazując go na "większych" ekranach

Jeśli zajmujesz się tylko telefonem komórkowym:

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

Znalazłem lepszy sposób na zrozumienie użytkownika za pomocą mouseover i otwierania datepicker po kliknięciu :

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

Również Ukryj strzałkę webkit i ustaw ją w 100% szerokości, aby pokryć kliknięcie :

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

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

Oto kolejny możliwy hack nie używając js i nadal używając css content. Zauważ, że ponieważ {[3] } nie jest obsługiwana w niektórych przeglądarkach dla wejść, musimy wybrać wejście w inny sposób, tak samo dla 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>

Znalazłem lepszy sposób na rozwiązanie twojego problemu. Myślę, że to ci pomoże.

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

To działa dla mnie używając tego jako elementu wejściowego:

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

Ten CSS pokazuje stały element zastępczy. Wybrana wartość jest wyświetlana za symbolem zastępczym.

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

Używam tego rozwiązania dla formularza Wordpress z wtyczką contact-form-7.

Wypróbuj moje rozwiązanie. Używam atrybutu 'required', aby dowiedzieć się, czy input jest wypełniony, a jeśli nie, pokazuję tekst z atrybutu '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
}

Rozszerzenie wersji Mumthezir, która działa lepiej na iOS, oparte na komentarzu Mathijsa Segersa:

(używa trochę AngularJS, ale mam nadzieję, że masz pomysł.)

<label style='position:relative'>
    <input type="date" 
           name="dateField" 
           onfocus="(this.type='date')"
           ng-focus="dateFocus=true" ng-blur="dateFocus=false" />
    <span ng-if='!dateFocus && !form.date' class='date-placeholder'>
        Enter date
    </span>
</label>

Ponieważ wszystko jest zawinięte w label, kliknięcie span automatycznie skupia input.

CSS:

.date-placeholder {
    display: inline-block;
    position: absolute;
    text-align: left;
    color: #aaa;
    background-color: white;
    cursor: text;
    /* Customize this stuff based on your styles */
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    line-height: 32px;
    padding-left: 12px;
}

Możesz użyć atrybutu "value" , na przykład:

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