Brak symbolu zastępczego dla pola typu wejściowego = „data”

Robię aplikację phonegap. Kiedy próbuję type="date"pole wprowadzania, jak pokazano poniżej, pokazuje selektor dat w iPhonie, zgodnie z oczekiwaniami, ale nie pokazuje symbolu zastępczego, który podałem. Znalazłem ten sam problem w SO, ale nigdzie nie ma rozwiązania.

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

Może to nie jest właściwe ... ale pomogło mi.

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

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

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

Mam nadzieję że to pomoże.

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

Odnośnie komentarza (ów) Firefoksa: Ogólnie, Firefox nie wyświetla żadnego tekstu zastępczego dla danych wejściowych typu data. Ale ponieważ jest to pytanie dotyczące Cordova / PhoneGap, nie powinno to budzić obaw (chyba że chcesz tworzyć oprogramowanie przeciwko 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':'')">

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 wstaw coś takiego do 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 maski wprowadzania jQuery na pulpicie z typem tekstu wejściowego. To rozwiązanie to fajny sposób, jeśli twój kod działa na ie8.

Na dzień dzisiejszy (2016) z powodzeniem korzystałem z tych 2 fragmentów (plus działają świetnie z Bootstrap4).

Dane wejściowe po lewej stronie, 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 znika po kliknięciu

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

Zgodnie ze standardem HTML :

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

Mi to pasuje:

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

Użyłem tej odrobiny 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');
    });
});

Bazując na odpowiedziach deadproxor i Alessio, spróbuję używać tylko CSS:

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

A jeśli chcesz, aby symbol zastępczy był niewidoczny po wpisaniu czegoś w danych wejściowych, możemy spróbować użyć selektorów: valid i: invalid, jeśli dane wejściowe są wymagane.

EDYTOWAĆ

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>

Znalazłem lepszy sposób rozwiązania problemu. Myślę, że to ci pomoże. po wyostrzeniu pole zmieni tekst na tekst, aby wyświetlić symbol zastępczy. gdy jest skupiony, jego typ zmienia się na datę, więc zostanie wyświetlony widok kalendarza.

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

Wziąłem pomysł z jbarlow, ale dodałem if w funkcji onblur, więc pola zmieniają swój typ tylko wtedy, gdy wartość jest pusta

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

Rozwiązanie problemu w aktualnej poprawnej odpowiedzi „kliknięcie pola powoduje wyświetlenie klawiatury ekranowej zamiast selektora dat”:

Problem jest spowodowany tym, że przeglądarka zachowuje się zgodnie z typem danych wejściowych po kliknięciu (= tekst). Dlatego konieczne jest zaprzestanie koncentrowania się na elemencie wejściowym (rozmycie), a następnie programowe ponowne uruchomienie fokusu na elemencie wejściowym, który został zdefiniowany jako type = date przez JS w pierwszym kroku. Klawiatura wyświetla się w trybie numeru telefonu.

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

wypróbuj moje rozwiązanie. Używam atrybutu „required”, aby dowiedzieć się, czy dane wejściowe są wypełnione, 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
}

Zajęło mi to trochę czasu, wymyślenie tego, zostaw to jako type="text"i dodajonfocus="(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 się dzieje powyżej

Podsumowując problem z wprowadzaniem dat:

• Musisz je wyświetlić (tj. Unikać wyświetlania: none), w przeciwnym razie interfejs wejściowy nie zostanie wyzwolony;
• symbol zastępczy jest z nimi sprzeczny (zgodnie ze specyfikacją i ponieważ muszą wyświetlać określony interfejs użytkownika);
• Konwersja ich na inny typ danych wejściowych na czas nieostry umożliwia stosowanie symboli zastępczych, ale fokus wyzwala wówczas niewłaściwy interfejs użytkownika (klawiatura), przynajmniej na krótki czas, ponieważ zdarzeń fokusa nie można anulować.
• wstawianie (przed) lub dodawanie (po) treści nie zapobiega wyświetlaniu wartości wejściowej daty.

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

Tak więc HTML, taki jak:

<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ć stylizowany 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, fokus) na takiej skojarzonej etykiecie zostanie odzwierciedlone w samym polu, a więc wyzwoli interfejs wprowadzania daty.

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

Więc to, co postanowiłem zrobić, wreszcie jest tutaj i działa dobrze na wszystkich przeglądarkach mobilnych, w tym 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

Pracuję z ionicframework, a rozwiązanie dostarczone przez @Mumthezir jest prawie idealne. W przypadku, gdyby ktoś miał taki sam problem jak ja (po zmianie wejście jest nadal skupione, a przy przewijaniu wartość po prostu znika), więc dodałem onchange, aby zrobić input.blur ()

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

Możesz

1. ustawić go jako tekst
2. Konwertuj na bieżąco pod kątem ostrości
3. kliknij na to
4. ... pozwól użytkownikowi sprawdzić datę
5. po zmianie zapisz wartość
6. ustaw wejście do wpisywania tekstu
7. ustaw wartość wejściową typu tekstu na przechowywaną wartość

lubię to...

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

Znalazłem lepszy sposób obsługi podstawowego rozumienia użytkownika przez najechanie kursorem myszy i otwarcie selektora daty 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">

Ukryj również strzałkę webkit i ustaw ją w 100% tak, aby zakrywała 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;
}

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

Przede wszystkim 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ż normalny symbol zastępczy, musiałem użyć zwykłego.

<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 zastosowano atrybut viewchild birthDate, aby móc uzyskać dostęp do tych danych wejściowych z komponentu. I zdefiniowałeś wyrażenie kątowe w atrybucie symbolu zastępczego, które zadecyduje, czy pokażemy symbol zastępczy, czy nie. Jest to główna wada rozwiązania polega na tym, że musisz zarządzać widocznością symbolu 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">

Zmieniony kod mumthezir

Dziwię się, że istnieje tylko jedna odpowiedź z podejściem podobnym do tego, którego użyłem.
Inspirację zaczerpnąłem z komentarza @ Dtipson na temat odpowiedzi @Mumthezir VP.

Używam do tego dwóch wejść, jedno to fałszywe wejście, type="text"na którym ustawiam symbol zastępczy, drugie to prawdziwe pole type="date".
W mouseenterprzypadku wydarzenia na ich kontenerze ukrywam fałszywe dane wejściowe i pokazuję prawdziwe, a na mouseleavewydarzeniu robię odwrotnie . Oczywiście pozostawiam widoczne wejście rzeczywiste, jeśli ma ustawioną wartość.
Napisałem kod, aby używać czystego Javascript, ale jeśli używasz jQuery (tak), bardzo łatwo jest go „przekonwertować”.

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

Przetestowałem to również na telefonie z Androidem i działa, gdy użytkownik dotknie pola, pojawi się datapicker. Jedyną rzeczą jest to, że jeśli rzeczywiste dane wejściowe nie mają wartości, a użytkownik zamyka DatePicker bez wybierania daty, dane wejściowe pozostaną widoczne, dopóki nie dotkną poza nim. Nie ma żadnego wydarzenia, którego można by słuchać, aby wiedzieć, kiedy datapicker zostanie zamknięty, więc nie wiem, jak to rozwiązać.

Nie mam urządzenia z systemem iOS, na którym mogę to przetestować.

Rozwijając rozwiązanie @ mvp z myślą o dyskretnym javascript, 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 ma wartość null, a następnie umieścić na nim [Wymagane], jeśli jest wymagane. Jeśli to zrobisz, pojawi się tekst zastępczy.

Hej, więc zeszłej nocy natknąłem się na ten sam problem i wymyśliłem kombinację wszystkich twoich odpowiedzi i jakiejś błyszczącej magii wykonują 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 całkiem proste, wystarczy wykonać podstawowe wprowadzenie daty w HMTL5 i ustawić symbol zastępczy. Następny przystanek: CSS , ustawiamy pseudo-element: before-before, aby udawał nasz symbol zastępczy, po prostu pobiera atrybut symbolu zastępczego z samego wejścia. Udostępniłem to tylko od szerokości okna roboczego 1024px - dlaczego powiem później. A teraz jQuery , po kilkukrotnej refaktoryzacji wymyśliłem ten fragment kodu, który będzie sprawdzał przy każdej zmianie, czy jest ustawiona wartość, czy nie, jeśli nie, to (ponownie) doda klasę, odwrotnie .

ZNAJ PROBLEMY:

• występuje problem w chrome z domyślnym selektorem dat, do tego służy zapytanie o media. Doda symbol zastępczy przed domyślną rzeczą „dd.mm.rrrr”. Możesz również ustawić symbol zastępczy wejścia daty na `` data: '' i dostosować kolor w przypadku braku wartości w danych wejściowych ... dla mnie spowodowało to kilka innych mniejszych problemów, więc zdecydowałem się po prostu nie wyświetlać tego na `` większym ekrany

mam nadzieję, że to pomoże! cheerio!

Jeśli interesuje Cię tylko telefon komórkowy:

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

Oto kolejny możliwy hack, który nie używa js i nadal używa css content. Zauważ, że ponieważ :afternie jest to obsługiwane w niektórych przeglądarkach dla danych wejściowych, musimy wybrać wejście w inny sposób, tak samo dlacontent 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>

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 arkusz CSS pokazuje stały symbol zastępczy. Wybrana wartość jest wyświetlana po symbolu 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.

Żadne z rozwiązań nie działało poprawnie dla mnie w Chrome w iOS 12 i większość z nich nie jest dostosowana do ewentualnego wielokrotnego wprowadzania daty na stronie. Zrobiłem co następuje, co w zasadzie tworzy fałszywą etykietę na wejściu daty i usuwa ją po dotknięciu. Usuwam też fałszywą etykietę, jeśli szerokość widocznego obszaru przekracza 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;
    }
}