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

120

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">
Mumthezir VP
źródło
stackoverflow.com/a/23683687/1783439 pracował dla mnie
nu everest
1
Możliwy duplikat
symbolu

Odpowiedzi:

156

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

Mumthezir VP
źródło
7
Wydaje się, że to fajna funkcja, jednak kliknięcie pola powoduje wyświetlenie klawiatury ekranowej zamiast selektora daty. Niezła próba.
Mathijs Segers,
2
@MathijsSegers Czy znalazłeś rozwiązanie, które NIE pokazuje klawiatury? Wypróbowałem to rozwiązanie tutaj, ale w iOS 6, 7 i 8 pokazuje na chwilę klawiaturę, a następnie pokazuje datepicker.
Jabel Márquez
7
No tak, obrzydliwe. Dodałem zakres z wyglądem pola tekstowego w polu daty, dzięki czemu jest on widoczny tylko na iOS. Indeks Z w datepicker był wyższy niż zakres, ale alfa 0,01 w css. Onclick ujawniłbym pole daty. Działa, ale jest trochę paskudny.
Mathijs Segers
4
Zauważyłem, że to nie działa na urządzeniach iOS, czy ktoś ma na to rozwiązanie?
Mikkel Fennefoss
3
W przypadku aplikacji Cordova użyj zdarzenia onmouseenter zamiast zdarzenia onfocus , a następnie selektor dat otworzy się po pierwszym kliknięciu
ja
89

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.

jbarlow
źródło
1
Dzięki! To zadziałało idealnie dla mnie! Czy mogę zasugerować wyłączenie tego pola, a następnie usunięcie wyłączenia po kliknięciu? Pracowałem w Angular i napisałem funkcję zakresu, aby zmienić typ i usunąć wyłączenie, zatrzyma dziwne błędy, gdy w jakiś sposób skupi się na polu tekstowym
Torch2424
2
O wiele lepsze rozwiązanie. Dziękuję
Profstyle
3
Jestem w stanie zobaczyć symbol zastępczy, gdy jest nieostry, ale aby uzyskać selektor dat, muszę dwukrotnie go kliknąć. Jak mogę to rozwiązać?
Suraj
1
Najlepsze rozwiązanie, jakie znalazłem, bardzo dziękuję
Fran Sandi,
3
miły! bardzo odpowiednie rozwiązanie. : D Mam nadzieję, że wkrótce HTML5 lub HTML6 pozwolą na stosowanie symboli zastępczych w datach. Ale na razie jest to bardzo dobra obejście. : D
jehzlau
35

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

fentas
źródło
1
Ta wersja nie zadziera z innymi klasami<input type="date" placeholder="MY PLACEHOLDER" onchange="this.classList.toggle('has-value',this.value);">
achairapart
dobra odpowiedź stary, jesteś najlepszy. Szukam odpowiedzi aż do bólu głowy. dziękuję
Roman Traversine
użyłem tego i dodałem d, input[type="date"]:not(:focus):not(.has-value):beforeaby pokazać format, gdy wejście jest skoncentrowane (dla osób, które
wpisują
20

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.

Alessio Kenta Di Crescenzo
źródło
Najlepszy wybór tutaj dla mnie na Androida! Niezłe!
Zappescu
Doskonały! Wystarczy ustawić stan początkowy „pełnej” klasy, np. Jeśli edytujesz istniejącą datę.
bjnord
Sugeruję, że powinniśmy użyć color: #aaawyglądu podobnego do symbolu zastępczego na iOS. color: lightgrayjest po prostu za lekki.
Rockallite
Świetna odpowiedź! Kodując, poprawiasz czytelność jQuery za pomocą toggleClass:$("#myel").on( "input" , function(){ $(this).toggleClass( "full" , $(this).val().length > 0 ); });
Mike
18

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;
}
romaricdrigon
źródło
Działa czysto i bez problemów.
user12379095
11

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.

int32_t
źródło
Więc co powinienem zrobić?
Mumthezir VP
2
@mvp, nie należy używać atrybutu symbolu zastępczego i umieszczać element <label> powiązany z wejściem [typ = data].
int32_t
czy powinien wyglądać jak uchwyt na miejsce?
Mumthezir VP,
2
Etykiety i symbole zastępcze to dwie różne rzeczy. Nie rozumiem, co tu sugerujesz.
Adeynack
2
To jedyna poprawna odpowiedź. +1. Ciekawe, co się dzieje z ludźmi! Właśnie natknąłem się na to, co wynika z fałszywego celu i byłem zdumiony liczbą głosów na zaakceptowaną odpowiedź: (Specyfikacje wyraźnie mówią, że słowa nie mogą być określone i nie mają zastosowania , nadal ludzie chcą wbić to w swoje kiepskie aplikacje internetowe .
Abhitalks
10

Mi to pasuje:

input[type='date']:after {
  content: attr(placeholder)
}
deadproxor
źródło
3
Jedynym problemem jest usunięcie symbolu zastępczego po wybraniu daty. Uchwyt zastępczy nie zostaje usunięty.
egr103
W iOS 9.3 Safari sprawi, że :afterpseudoelement zniknie po wybraniu daty. Nie ma więc potrzeby usuwania
symbolu
2
Po prostu dodaj, onfocus="(this.placeholder='')"aby usunąć symbol zastępczy po wybraniu daty.
cyklicznie
Doskonały!!! U mnie też zadziałało, dodając skupienie, które zasugerował @RobbieNolan, działające doskonale.
Bruno De Faria
9

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');
    });
});
Davide Russo Abram
źródło
proszę dodać wyjaśnienie, dlaczego to pomoże
zohar
@Davide Russo Abram: Proszę dodać wyjaśnienie, jak to działa?
jsduniya
9

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>

Yuri
źródło
9

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"> 
Kawaldeep Singh
źródło
Witamy w Stack Overflow! Spróbuj podać miły opis, jak działa Twoje rozwiązanie. Zobacz: Jak napisać dobrą odpowiedź? . Dzięki
sɐunıɔ ןɐ qɐp
7

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">
Franco Dipré
źródło
3

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();">
ma90
źródło
Nawet z tym kodem w iOS (testowane na iOS 6, 7 i 8) pokazuje na chwilę klawiaturę, a następnie pokazuje datepicker. Czy jest sposób, aby NIE pokazać klawiatury?
Jabel Márquez
@ JabelMárquez Możesz użyć readonly = "true", aby zatrzymać wyświetlanie klawiatury ... więc coś takiego: <input type = "text" name = "date" value = "" placeholder = "Date" readonly = "true" onfocus = "this.removeAttribute ('readonly'); this.type = 'date'; this.setAttribute ('onfocus', ''); this.blur (); this.focus ();">. Pracował dla mnie.
pschueller
3

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
}
Roman Yakoviv
źródło
1
dd / mm / rrrr jest nadal wyświetlany w Chrome (70).
schankam
2

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

Dally S
źródło
2

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.

Javarome
źródło
2

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

NISHANK KUMAR
źródło
2

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"> 
dźwiękowy
źródło
2

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

jlbofh
źródło
2

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;
}
Matt Loye
źródło
1

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' :
    '';
  }
}
xyztdanid4
źródło
1

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

Zmieniony kod mumthezir

Rae Ian
źródło
1

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ć.

nonzaprej
źródło
0

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') }
)
poweratom
źródło
0

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.

Tutaj jest johnny
źródło
0

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!


źródło
0

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

input[type="date"]:invalid:before{
    color: rgb(117, 117, 117);
    content: attr(placeholder);
}
A2D
źródło
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;');
});
Albo Choban
źródło
Przesyłanie kodu pocztowego bez żadnego wyjaśnienia nie jest tutaj mile widziane. Edytuj swój post.
Cid
0

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>

Flavien Volken
źródło
0

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.

phlegx
źródło
ten prefiks moz nie działa w FF dla mnie: /
saomi
0

Ż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;
    }
}
Niccolò Mineo
źródło