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

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

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

надеюсь, что это помогает.

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

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 inputmask для рабочего стола с типом ввода текста. Это решение это хороший способ, если ваш код работает на 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;
}

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

по данным стандарт HTML:

следующего содержания атрибуты не должны быть определены и не применяются к элементу: приму, альт, проверять, каталог, formaction, formenctype, formmethod, formnovalidate, formtarget, высота, inputmode, максимальная длина, минимальная длина, несколько, рисунком, местозаполнитель, размер, src и ширина.

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

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

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

EDIT

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

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[type='date']:after {
  content: attr(placeholder)
}

решение проблемы в текущем правильном ответе "щелчок по полю показывает экранную клавиатуру вместо datepicker":

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

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

чтобы суммировать проблему ввода даты:

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

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

Итак, 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;
}

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

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

Итак, что я решил сделать, наконец, здесь, и он отлично работает на всех мобильных браузерах, включая iPhone и андроиды.

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

мне потребовалось некоторое время, чтобы понять это, оставьте его как 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">

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

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

прежде всего я определил следующий 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">

исправленный код мумтезира

расширяя решение @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') }
)

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

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

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-date-input и установить заполнитель. Следующая остановка: CSS, мы установка a: before-pseudo-element для подделки нашего заполнителя, он просто берет атрибут заполнителя из самого ввода. Я сделал это только от ширины области просмотра экрана 1024px - почему я собираюсь рассказать позже. А теперь jQuery, после рефакторинга пару раз я придумал этот код, который будет проверять каждое изменение, если есть значение или нет, если его не будет (повторно)добавить класс, наоборот.

знаю Вопросы:

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

надеюсь, что помогает! ура!

Если вас интересует только мобильный телефон:

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

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

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 placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"> 

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

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

попробовать мое решение. Я использую атрибут' 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
}

расширение версии Mumthezir, которая лучше работает на iOS, на основе комментария Mathijs Segers:

(использует некоторые AngularJS, но, надеюсь, вы получите идею.)

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

потому что все это завернуто в label, нажмите span автоматически фокусирует 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;
}

вы можете использовать атрибут "value", например:

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