Как смоделировать функциональность заполнителя в поле ввода даты?

Ответ 1

Я использую следующий трюк CSS:

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

<input type="date" placeholder="Choose a Date" />

Ответ 2

использовать этот атрибут ввода событий

onfocus="(this.type='date')" onblur="(this.type='text')"

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container mt-3">
  <label for="date">Date : </label>
  <input placeholder="Your Date" class="form-control" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date">
</div>

Ответ 3

Вы можете использовать CSS перед псевдо.

.dateclass {
  width: 100%;
}

.dateclass.placeholderclass::before {
  width: 100%;
  content: attr(placeholder);
}

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}

<input
  type="date"
  placeholder="Please specify a date"
  onClick="$(this).removeClass('placeholderclass')"
  class="dateclass placeholderclass">

Ответ 4

Вы можете сделать что-то вроде этого:

<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">

Ответ 5

Поле ввода даты HTML5 фактически не поддерживает атрибут для заполнителя. Он всегда будет игнорироваться браузером, по крайней мере, по текущей спецификации.

Как указано здесь

Ответ 6

input[type="date"] DOMElement принимает только следующее значение: YYYY-MM-DD, любой другой формат или текст с пропуском.

Live Demo

HTML

<input type="text" placeholder="bingo" />
<input type="date" placeholder="2013-01-25" />

Чистый JavaScript

window.onload = function () {
    /* Grab all elements with a placeholder attribute */
    var element = document.querySelectorAll('[placeholder]');

    /* Loop through each found elements */
    for (var i in element) {
        /* If the element is a DOMElement and has the nodeName "INPUT" */
        if (element[i].nodeType == 1 && element[i].nodeName == "INPUT") {

            /* We change the value of the element to its placeholder attr value */
            element[i].value = element[i].getAttribute('placeholder');
            /* We change its color to a light gray */
            element[i].style.color = "#777";

            /* When the input is selected/clicked on */
            element[i].onfocus = function (event) {
                /* If the value within it is the placeholder, we clear it */
                if (this.value == this.getAttribute('placeholder')) {
                    this.value = "";
                    /* Setting default text color */
                    this.style.color = "#000";
                };
            };

            /* We the input is left */
            element[i].onblur = function (event) {
                /* If the field is empty, we set its value to the placeholder */
                if (this.value == "") {
                    this.value = this.getAttribute('placeholder');
                    this.style.color = "#777";
                }
            };
        }
    }
}

Обзор производительности

В этом точном случае, с 2 input элементами, Pure JavaScript ~ 40% ± 10% быстрее.

С 32 элементами input разница остается той же (на 43% ± 10% быстрее для Pure JS).

Ответ 7

Попробуйте следующее:

Добавьте атрибут placeholder в ваше поле с нужным значением, затем добавьте этот jQuery:

$('[placeholder]').each(function(){
    $(this).val($(this).attr('placeholder'));
  }).focus(function(){
    if ($(this).val() == $(this).attr('placeholder')) { $(this).val(''); }
  }).blur(function(){
    if ($(this).val() == '') { $(this).val($(this).attr('placeholder')); }
  });

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

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

Ответ 8

Как упоминалось здесь, я заставил его работать с псевдо-классом ": before" и небольшим количеством javascript. Вот идея:

 #myInput:before{ content:"Date of birth"; width:100%; color:#AAA; } 
 #myInput:focus:before,
 #myInput.not_empty:before{ content:none }

Затем в javascript добавьте класс "not_empty" в зависимости от значения в событиях onChange и onKeyUp.

Вы можете даже добавить все это динамически в каждое поле даты. Проверьте мой ответ на другой поток для кода.

Это не идеально, но хорошо работает в браузерах Chrome и iOS7. Может быть, это может вам помочь.

Ответ 9

Как я упомянул здесь

изначально задает тип поля для текста.

по смене фокуса, чтобы ввести дату

Ответ 10

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

Ответ 11

Я использую этот метод CSS для того, чтобы имитировать заполнитель на дату ввода.

input[type="date"] {
  position: relative;
}

input[type="date"]:before {
  content: attr(placeholder);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  color: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  line-height: 1.5;
  padding: 0 0.5rem;
}

input[type="date"]:focus:before,
input[type="date"]:not([value=""]):before
{
  display: none;
}

<input type="date" placeholder="Choose date" value="" onChange="this.setAttribute('value', this.value)" />

Ответ 12

Итак, вот что я сделал:

$(document).on('change','#birthday',function(){
    if($('#birthday').val()!==''){
        $('#birthday').addClass('hasValue');
    }else{
        $('#birthday').removeClass('hasValue');
    }
})

Это нужно удалить заполнитель, когда задано значение.

input[type="date"]:before {
  content: attr(placeholder) !important;
  color: #5C5C5C;
  margin-right: 0.5em;
}
input[type="date"]:focus:before,
input[type="date"].hasValue:before {
  content: "" !important;
  margin-right: 0;
}

В фокусе или если .hasValue, удалите заполнитель и его маржу.

Ответ 13

Использование jQuery (уверен, что вы можете добиться этого с Vanilla. Это гарантирует, что формат даты остается прежним.

$(function() {
  $('.sdate').on('focus', function() {
    $(this).attr('type', 'date');
  });
  $('.sdate').on('blur', function() {
    if(!$(this).val()) { // important
      $(this).attr('type', 'text');
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" class="sdate" placeholder="From">

Ответ 14

CSS

input[type="date"] {position: relative;}
input[type="date"]:before {
	position: absolute;left: 0px;top: 0px;
	content: "Enter DOB";
	color: #999;
	width: 100%;line-height: 32px;
}
input[type="date"]:valid:before {display: none;}

<input type="date" required />