Не показывать заполнитель для типа ввода = поле "дата"

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

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

Ответ 1

Это может быть неуместно... но это помогло мне наконец.

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

Ответ 2

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

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

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

Ответ 3

Я закончил тем, что использовал следующее.

Относительно комментариев 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':'')">

Ответ 4

Я использовал это в моем 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.

Ответ 5

На сегодняшний день (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;
}

Ответ 6

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

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

Ответ 7

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

Ответ 8

Это работает для меня:

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

Ответ 9

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

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

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

ИЗМЕНИТЬ

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

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>

Ответ 10

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

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

Ответ 11

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

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

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

Ответ 12

Придумал это, оставьте его как 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">

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

Ответ 13

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

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

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

Итак, 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 версию с вашего планшета или мобильного телефона.

Ответ 14

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

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

Ответ 15

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

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

Ответ 16

Вы можете

установите его как текст типа
конвертировать в дату в фокусе
нажмите на него
... пусть пользователь проверяет дату
при изменении сохраните значение
установить ввод для ввода текста
установить значение ввода типа текста для сохраненного значения

как это...

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

Ответ 17

С точки зрения 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"
         >

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

@ViewChild('birthDate') birthDate;

getBirthDatePlaceholder() {
  if (!this.birthDate) {
    return;
  } else {
    return this.birthDate.nativeElement.value === '' ?
    'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE' :
    '';
  }
}

Ответ 18

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

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

Ответ 19

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

Ответ 20

Я взял идею 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">

Ответ 21

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

Ответ 22

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

Ответ 23

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

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-pseudo-element для подделки нашего заполнителя, он просто берет атрибут placeholder из самого входа. Я сделал это доступным только с ширины окна просмотра 1024px - почему я расскажу позже. И теперь jQuery, после рефакторинга пару раз я придумал этот бит кода, который будет проверять каждое изменение, если есть значение, установленное или нет, если оно не будет (повторно) добавьте класс, наоборот.

ЗНАТЬ ВОПРОСЫ:

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

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

Ответ 24

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

Ответ 25

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

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

Ответ 26

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

Ответ 27

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

Ответ 28

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

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

Ответ 29

Ни одно из решений не работало правильно для меня на Chrome в iOS 12, и большинство из них не приспособлены для того, чтобы справиться с возможным вводом нескольких дат на странице. Я сделал следующее, что в основном создает фальшивый ярлык над вводом даты и удаляет его при нажатии. Я также удаляю фальшивую метку, если ширина области просмотра превышает 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;
    }
}

Ответ 30

Расширение версии 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;
}