Не отображается заполнитель для поля типа ввода = «дата»

Я делаю приложение для телефонных разговоров. Когда я пытаюсь type="date"ввести поле, как показано ниже, на iPhone отображается средство выбора даты, как я и ожидал, но не отображается указанный мной заполнитель. Я нашел ту же проблему здесь, в SO, но нигде нет решения.

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

Возможно, это не подходит ... но мне это помогло.

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

Если вы используете метод mvp, но добавляете событие onblur, чтобы вернуть его в текстовое поле, чтобы текст заполнителя снова появлялся, когда поле ввода теряет фокус. Это просто делает хак немного приятнее.

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

Надеюсь это поможет.

В итоге я использовал следующее.

Что касается комментария (ов) Firefox: Как правило, Firefox не отображает текстовый заполнитель для даты ввода. Но поскольку это вопрос Cordova / PhoneGap, это не должно вызывать беспокойства (если вы не хотите разрабатывать против 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':'')">

Я использовал это в своем CSS:

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

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

и поместите это в javascript:

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

у меня работает на мобильных устройствах (Ios8 и android). Но я использовал маску ввода jquery для рабочего стола с типом ввода текста. Это решение - хороший способ, если ваш код работает на ie8.

На сегодняшний день (2016 г.) я успешно использовал эти 2 фрагмента (плюс они отлично работают с Bootstrap4).

Входные данные слева, заполнитель слева

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

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

Заполнитель исчезает при нажатии

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

Согласно стандарту HTML :

Следующие атрибуты содержимого не должны быть указаны и не применяются к элементу: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, inputmode, maxlength, minlength, multiple, pattern, placeholder , size, src и width.

Меня устраивает:

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

Я использовал этот 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');
    });
});

Основываясь на ответах deadproxor и Alessio, я бы попытался использовать только CSS:

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

И если вам нужно сделать заполнитель невидимым после ввода чего-либо, мы могли бы попробовать использовать селекторы: valid и: invalid, если ваш ввод является обязательным.

РЕДАКТИРОВАТЬ

Вот код, если вы используете требуемый для ввода:

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>

Нашел лучший способ решить вашу проблему. Думаю, это тебе поможет. когда фокус выделен, поле изменит тип на текст, чтобы отобразить ваш заполнитель. при выделении его тип меняется на дату, поэтому отображается календарь.

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

Я взял идею jbarlow, но добавил if в функцию onblur, чтобы поля меняли свой тип только в том случае, если значение пустое

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

Решение проблемы в текущем правильном ответе "при нажатии на поле отображается экранная клавиатура вместо средства выбора даты":

Проблема вызвана тем, что браузер ведет себя в соответствии с типом ввода при нажатии (= текст). Поэтому необходимо перестать фокусироваться на элементе ввода (размытие), а затем программно перезапустить фокус на элементе ввода, который был определен JS как type = date на первом этапе. Клавиатура отображается в режиме телефонных номеров.

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

попробуйте мое решение. Я использую атрибут 'required', чтобы узнать, заполнен ли ввод, и если нет, я показываю текст из атрибута '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
}

Мне потребовалось некоторое время, чтобы разобраться в этом, оставьте его как type="text"и добавьте onfocus="(this.type='date')", как показано выше.

Мне даже нравится упомянутая выше идея onBlur

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

Надеюсь, это поможет любому, кто не совсем понял, что происходит выше

Подводя итог проблеме ввода даты:

• Вы должны отображать их (т.е. избегать display: none), иначе пользовательский интерфейс ввода не будет запущен;
• заполнитель противоречит им (согласно спецификации и потому, что они должны отображать определенный пользовательский интерфейс);
• преобразование их в другой тип ввода для несфокусированного времени позволяет использовать заполнители, но фокус затем вызывает неправильный пользовательский интерфейс ввода (клавиатуру), по крайней мере, на короткое время, поскольку события фокуса не могут быть отменены.
• вставка (до) или добавление (после) содержимого не препятствует отображению входного значения даты.

Решение, которое я нашел для удовлетворения этих требований, - это использовать обычный трюк для стилизации элементов нативной формы: убедитесь, что элемент отображается, но не отображается, и отобразите его ожидаемый стиль с помощью связанной метки . Обычно метка отображается как ввод (включая заполнитель), но поверх нее.

Итак, HTML вроде:

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

Может быть оформлен как:

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

Любое событие (щелчок, фокус) на такой связанной метке будет отражено в самом поле и, таким образом, вызовет пользовательский интерфейс ввода даты.

Если вы хотите протестировать такое решение вживую, вы можете запустить эту версию Angular со своего планшета или мобильного телефона.

Итак, то, что я решил сделать, наконец, здесь, и он отлично работает во всех мобильных браузерах, включая iPhone и 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>

Дата

Я работаю с ionicframework, и решение, предоставленное @Mumthezir, почти идеально. В случае, если у кого-то будет такая же проблема, как у меня (после изменения ввод все еще сфокусирован, а при прокрутке значение просто исчезает), поэтому я добавил onchange, чтобы сделать input.blur ()

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

Ты можешь

1. установить его как текст
2. преобразовать в настоящее время в фокусе
3. нажмите на это
4. ... пусть пользователь проверяет дату
5. при изменении сохранить значение
6. установить ввод для ввода текста
7. установить значение ввода текстового типа в сохраненное значение

как это...

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

Нашел лучший способ справиться с базовым пониманием пользователя при наведении курсора мыши и открытии datepicker при нажатии:

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

Также скройте стрелку webkit и сделайте ее шириной 100%, чтобы перекрыть щелчок:

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

С точки зрения Angular мне удалось поместить заполнитель в элемент даты типа ввода.

Первым делом я определил следующий css:

.placeholder {
    color: $text-grey;
  }

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

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

Причина, по которой это необходимо, заключается в том, что если содержимое css3 имеет другой цвет, чем обычный заполнитель, мне пришлось использовать общий.

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

Затем в шаблоне используется атрибут viewchild BirthDate, чтобы иметь возможность доступа к этим входным данным из компонента. И определил угловое выражение для атрибута заполнителя, которое будет решать, показывать ли мы заполнитель или нет. Это главный недостаток решения, заключающийся в том, что вам нужно управлять видимостью заполнителя.

@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

Я удивлен, что есть только один ответ с подходом, аналогичным тому, который я использовал.
Я получил вдохновение из комментария @Dtipson к ответу @Mumthezir VP.

Я использую для этого два ввода: один - это поддельный ввод, type="text"на котором я установил заполнитель, а другой - настоящее поле с type="date".
В mouseenterсобытии в их контейнере я скрываю фальшивый ввод и показываю реальный, а с mouseleaveсобытием делаю наоборот . Очевидно, я оставляю реальный ввод видимым, если для него установлено значение.
Я написал код для использования чистого Javascript, но если вы используете jQuery (я использую), его очень легко «преобразовать».

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

Я тестировал это также на телефоне Android, и он работает, когда пользователь нажимает на поле, отображается датапикер. Единственное, что если реальный ввод не имел значения, и пользователь закрывает datepicker, не выбирая дату, ввод будет оставаться видимым, пока они не коснутся вне его. Нет события, которое можно было бы слушать, чтобы узнать, когда закроется датапикер, поэтому я не знаю, как это решить.

У меня нет устройства iOS, на котором можно его протестировать.

Расширяя решение @mvp с учетом ненавязчивого javascript, вот подход:

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

Я думаю, все, что вам нужно сделать, это изменить модель, чтобы указать, что поле даты допускает значение NULL, а затем поставить на него [Обязательно], если это необходимо. Если вы сделаете это, появится текст-заполнитель.

Привет, я столкнулся с той же проблемой вчера вечером и выяснил, что комбинация всего вашего ответа и некоторой искрящейся магии хорошо справляется:

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

Объяснение: Итак, что здесь происходит, прежде всего в HTML , это довольно просто, просто выполняем базовый ввод даты HMTL5 и устанавливаем заполнитель. Следующая остановка: CSS , мы устанавливаем псевдоэлемент: before для подделки нашего заполнителя, он просто берет атрибут заполнителя из самого ввода. Я сделал это доступным только при ширине области просмотра 1024 пикселей - почему я расскажу позже. И теперь jQuery , после нескольких рефакторингов, я придумал этот фрагмент кода, который будет проверять каждое изменение, установлено ли значение или нет, если его нет, он (повторно) добавит класс, наоборот ,

ЗНАЙТЕ ПРОБЛЕМЫ:

• в chrome есть проблема с выбором даты по умолчанию, для этого и предназначен медиа-запрос. Он добавит заполнитель перед значением по умолчанию "dd.mm.yyyy". Вы также можете установить заполнитель для ввода даты на 'date:' и настроить цвет, если внутри ввода нет значения ... для меня это привело к некоторым другим меньшим проблемам, поэтому я просто не показывал его на 'больше 'экраны

надеюсь, это поможет! здор`ово!

Если вас интересует только мобильная связь:

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

Вот еще один возможный взлом, не использующий js и все еще использующий css content. Обратите внимание, что, поскольку :afterнекоторые браузеры не поддерживают ввод данных, нам нужно выбрать ввод другим способом, как и для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>

Это работает для меня, используя это как элемент ввода:

<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 показывает постоянный заполнитель. Выбранное значение отображается после заполнителя.

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

Я использую это решение для формы Wordpress с плагином contact-form-7.

Ни одно из решений не работало у меня правильно в Chrome в iOS 12, и большинство из них не адаптировано для работы с возможным вводом нескольких дат на странице. Я сделал следующее, что в основном создает поддельную метку над вводом даты и удаляет ее при нажатии. Я также удаляю поддельную метку, если ширина области просмотра превышает 992 пикселей.

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