52

日付フィールドでプレースホルダーを使用することは不可能ですが、本当に必要です。

プレースホルダーとして、それぞれにテキスト「From」と「To」を含む 2 つの日付入力が必要です。

4

14 に答える 14

96

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

于 2014-02-24T21:07:03.217 に答える
15

CSS の before pseudo を使用できます。

.dateclass {
  width: 100%;
}

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

.dateclass.placeholderclass:hover::before {
  width: 0%;
  content: "";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

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

フィドル

于 2014-02-25T16:26:50.863 に答える
14

You can do something like this:

<input onfocus="(this.type='date')" class="js-form-control" placeholder="Enter Date">
于 2015-12-08T00:38:53.023 に答える
0

これを試して：

必要な値を持つプレースホルダー属性をフィールドに追加してから、次の 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')); }
  });

プレースホルダーを使用できないフィールドについてはテストしていませんが、コードを変更する必要はまったくありません。

別の注意点として、このコードは、プレースホルダー属性をサポートしていないブラウザーにとっても優れたソリューションです。

于 2013-08-09T12:18:24.920 に答える
0

ここで述べたように

最初にフィールド タイプをテキストに設定します。

フォーカス時に、日付を入力するように変更します

于 2014-02-11T15:44:11.213 に答える
-1

わかりました、これが私がやったことです：

$(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 の場合は、プレースホルダーとそのマージンを削除します。

于 2016-10-29T09:33:35.003 に答える
-3

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

于 2016-03-02T05:58:07.147 に答える