blocks|key|188004|text|这可能不合适..。但这对我有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188005|​|188006|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocus="(this.type='date')"+id="date">|code-block|syntax|javascript|188007|188008|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>It may not be appropriate... but it helped me.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4693971|text|如果您使用mvp的方法，但添加onblur事件将其更改回文本字段，以便在输入字段失去焦点时再次显示占位符文本。这只会让黑客变得更好一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4693972|​|4693973|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocus="(this.type='date')"+onblur="(this.type='text')"+id="date"+/>|code-block|syntax|javascript|4693974|4693975|希望这能有所帮助。|4693976|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>If you use mvp's method but add the onblur event to change it back to a text field so the placeholder text appears again when the input field looses focus. It just makes the hack a little bit nicer.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" /&gt;</code></pre>
</div>
</div>
</p>

<p>Hope this helps.</p>


blocks|key|188450|text|到今天(2016)为止，我已经成功地使用了这两个代码片段(另外，它们在Bootstrap4上工作得很好)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188451|左侧为输入数据，左侧为占位符|188452|input[type=date]+{
++text-align:+right;
}

input[type="date"]:before+{
++color:+lightgrey;
++content:+attr(placeholder)+!important;
++margin-right:+0.5em;
}|code-block|syntax|javascript|188453|单击时占位符消失|188454|input[type="date"]:before+{
++color:+lightgrey;
++content:+attr(placeholder)+!important;
++margin-right:+0.5em;
}
input[type="date"]:focus:before+{
++content:+''+!important;
}|188455|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>As of today (2016), I have successfully used those 2 snippets (plus they work great with Bootstrap4).</p>

<h2>Input data on the left, placeholder on the left</h2>

<pre><code>input[type=date] {
  text-align: right;
}

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

<h2>Placeholder disappear when clicking</h2>

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


blocks|key|188256|text|我在我的css中使用了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188257|input[type="date"]:before{
++++color:lightgray;
++++content:attr(placeholder);
}

input[type="date"].full:before+{
++++color:black;
++++content:""!important;
}|code-block|syntax|javascript|188258|并将如下代码放入javascript中：|188259|$("#myel").on("input",function(){
++++if($(this).val().length>0){
++++$(this).addClass("full");
}
else{
+++$(this).removeClass("full");
+++}
+});|188260|它适用于我的移动设备(Ios8和安卓)。但是我在桌面上使用了jquery+inputmask和输入文本类型。如果你的代码在ie8上运行，这个解决方案是一个很好的方法。|188261|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>I used this in my css:</p>

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

input[type="date"].full:before {
    color:black;
    content:""!important;
}
</code></pre>

<p>and put somenthing like this into javascript:</p>

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

<p>it works for me for mobile devices (Ios8 and android). But I used jquery inputmask for desktop with input text type. This solution it's a nice way if your code run on ie8.</p>


blocks|key|188771|text|我采用了jbarlow的想法，但我在onblur函数中添加了一个if，因此字段仅在值为空时更改其类型|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188772|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocus="(this.type='date')"+onblur="(this.value+==+''+?+this.type='text'+:+this.type='date')"+id="date">|code-block|syntax|javascript|188773|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I took jbarlow idea, but I added an if in the onblur function so the fields only change its type if the value is empty</p>

<pre><code>&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.value == '' ? this.type='text' : this.type='date')" id="date"&gt;
</code></pre>


blocks|key|4694113|text|它对我来说很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694114|input[type='date']:after+{
++content:+attr(placeholder)
}|code-block|syntax|javascript|4694115|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>It works for me:</p>

<pre><code>input[type='date']:after {
  content: attr(placeholder)
}
</code></pre>


blocks|key|188293|text|我使用了这个jQuery：http://jsfiddle.net/daviderussoabram/65w1qhLz/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|188294|$('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');
++++});
});|code-block|syntax|javascript|188295|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/daviderussoabram/65w1qhLz/^0|D|1A|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I used this whit jQuery:
<a href="http://jsfiddle.net/daviderussoabram/65w1qhLz/" rel="noreferrer">http://jsfiddle.net/daviderussoabram/65w1qhLz/</a></p>

<pre><code>$('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');
    });
});
</code></pre>


blocks|key|188642|text|找到更好的方法来解决你的问题。我想这会对你有帮助的。当焦点突出时，该框会将类型转换为文本，以便显示您的占位符。在中聚焦时，其类型将更改为date，因此将显示日历视图。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188643|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocusin="(this.type='date')"+onfocusout="(this.type='text')"++id="date">+|code-block|syntax|javascript|188644|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Found a better way to solve your problem.
I think this will help you. when focused out, the box will change type into text so it will show your placeholder. when focused in, its type changes into date so the calendar view will be shown.</p>

<pre><code>&lt;input placeholder="Date" class="textbox-n" type="text" onfocusin="(this.type='date')" onfocusout="(this.type='text')"  id="date"&gt; 
</code></pre>


blocks|key|4694826|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694827|<input+placeholder="01-01-2021"+class="textbox-n"+type="text"+onfocus="(this.type='date')"+onblur="(this.type='text')"+id="date"+/>|code-block|syntax|javascript|4694828|4694829|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="01-01-2021" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|188192|text|解决当前正确答案“单击字段显示屏幕键盘而不是日期选择器”中的问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188193|该问题是由于浏览器在单击(=文本)时根据输入类型进行操作而导致的。因此，有必要停止聚焦于输入元素(模糊)，然后以编程方式重新聚焦于在第一步中由JS定义为type=date的输入元素。键盘以电话号码模式显示。|188194|<input+placeholder="Date"+type="text"+onfocus="this.type='date';
++++++++++++++++++++++this.setAttribute('onfocus','');this.blur();this.focus();">|code-block|syntax|javascript|188195|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Adressing the problem in the current correct answer "clicking the field shows the onscreen keyboard instead of the datepicker":</p>

<p>The problem is caused by the Browser behaving according to the type of input when clicking (=text). Therefore it is necessary to stop from focussing on the input element (blur) and then restart focus programmatically on the input element which was defined as type=date by JS in the first step. Keyboard displays in phonenumber-mode.</p>

<pre><code>&lt;input placeholder="Date" type="text" onfocus="this.type='date';
                      this.setAttribute('onfocus','');this.blur();this.focus();"&gt;
</code></pre>


blocks|key|188706|text|试试我的解决方案。我使用'required‘属性来了解输入是否已填充，如果没有，则显示属性'placeholder’中的文本|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188707|//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
}|code-block|syntax|javascript|188708|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>try my solution. I use 'required' attribute to get know whether input is filled and if not I show the text from attribute 'placeholder'</p>

<pre><code>//HTML
&lt;input required placeholder="Date" class="textbox-n" type="date" id="date"&gt;

//CSS
input[type="date"]:not(:valid):before {
   content: attr(placeholder);
   // style it like it real placeholder
}
</code></pre>


blocks|key|188127|text|我花了一段时间才弄明白这一点，将其保留为type="text"，然后添加onfocus="(this.type='date')"，就像上面所示的那样。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|188128|我甚至喜欢上面提到的onBlur的想法|188129|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocus="(this.type='date')"+onblur="(this.type='text')"+id="date">|188130|希望这篇文章能帮助那些不太了解上面发生的事情的人|188131|entityMap^0|K|B|10|S|0|0|0|3F|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|W|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|M|$]]

<p>Took me a while figuring this one out, leave it as <code>type="text"</code>, and add <code>onfocus="(this.type='date')"</code>, just as shown above.</p>

<p>I even like the onBlur idea mentioned above</p>

<p><code>&lt;input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" onblur="(this.type='text')" id="date"&gt;</code></p>

<p>Hope this helps anyone who didn't quite gather whats going on above</p>


blocks|key|4694101|text|对@mvp的解决方案进行扩展，并考虑到不起眼的javascript，下面是方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694102|HTML：|4694103|<input+type="text"+placeholder="Date"+class="js-text-date-toggle">|code-block|syntax|javascript|4694104|Javascript：|4694105|$('.js-text-date-toggle').on('focus',+function()+{
++$(this).attr('type',+'date')+}
).on('blur',+function()+{
++$(this).attr('type'),+'text')+}
)|4694106|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Expanding on @mvp's solution with unobtrusive javascript in mind, here's the approach:</p>

<p>HTML:</p>

<pre><code>&lt;input type="text" placeholder="Date" class="js-text-date-toggle"&gt;
</code></pre>

<p>Javascript:</p>

<pre><code>$('.js-text-date-toggle').on('focus', function() {
  $(this).attr('type', 'date') }
).on('blur', function() {
  $(this).attr('type'), 'text') }
)
</code></pre>


blocks|key|188328|text|所以我最终决定在这里做的是，它在所有的移动浏览器上都工作得很好，包括iPhones和Android。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188329|​|188330|$(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'));
++++++}
++++});
++});
++
});|code-block|syntax|javascript|188331|label+{
++position:+relative;++
}
.custom-placeholder+{
++++#font+>+.proxima-nova-light(26px,40px);
++++position:+absolute;
++++top:+0;
++++left:+0;
++++z-index:+10;
++++color:+#999;
}|188332|<label>
++<input+type="date"+placeholder="Date">
++<span+class="custom-placeholder">Date</span>
</label>|188333|188334|++++++++++++++++++++++++++++++Date|188335|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|F|7|X|8|@]|9|@]|A|$G|H]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>SO what i have decided to do finally is here and its working fine on all mobile browsers including iPhones and Androids.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(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'));
      }
    });
  });
  
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>label {
  position: relative;  
}
.custom-placeholder {
    #font &gt; .proxima-nova-light(26px,40px);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    color: #999;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
  &lt;input type="date" placeholder="Date"&gt;
  &lt;span class="custom-placeholder"&gt;Date&lt;/span&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>

<p>
                
                Date
            </p>


blocks|key|4694292|text|我正在使用由@Mumthezir提供的Im框架和解决方案，这几乎是完美的。以防有人遇到和我一样的问题(更改后，输入仍然是焦点，滚动时，值就消失了)，所以我添加了onchange来使input.blur()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694293|<input+placeholder="Date"+class="textbox-n"+type="text"+onfocus="+(this.type='date')"+onchange="this.blur();"++id="date">+|code-block|syntax|javascript|4694294|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Im working with ionicframework and solution provided by @Mumthezir is almost perfect. In case if somebody would have same problem as me(after change, input is still focused and when scrolling, value simply dissapears) So I added onchange to make input.blur()</p>

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


blocks|key|188566|text|找到了一种更好的方法来处理用户的基本理解，通过鼠标悬停和点击打开日期选择器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188567|<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">|offset|length|style|CODE|188568|另外，隐藏webkit箭头并使其100%25宽，以覆盖点击：|188569|input[type="date"]+{
++++position:+relative;
}
input[type="date"]::-webkit-calendar-picker-indicator+{
++position:+absolute;
++height:+100%25;
++width:+100%25;
++opacity:+0;
++left:+0;
++right:+0;
++top:0;
++bottom:+0;
}|code-block|syntax|javascript|188570|entityMap^0|0|0|52|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|V|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>Found a better way to handle user basic comprehension with mouseover and opening datepicker on click :</p>

<p><code>&lt;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"&gt;</code></p>

<p>Also hide webkit arrow and make it 100% wide to cover the click :</p>

<pre><code>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;
}
</code></pre>


blocks|key|4694253|text|我认为您所要做的就是更改模型，说明日期字段可以为空，如果需要，则将其放入required字段。如果执行此操作，则会显示占位符文本。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694254|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I think all you have to do is change the model to say the date field is nullable and then put [Required] on it if it is required.  If you do this the placeholder text does appear.</p>


blocks|key|4694403|text|从角度来看，我设法在输入类型date元素中放置了一个占位符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694404|首先，我定义了以下css：|4694405|.placeholder+{
++++color:+$text-grey;
++}

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

++input::-webkit-input-placeholder+{
++++color:+$text-grey;
++}|code-block|syntax|javascript|4694406|这是必要的，因为如果css3内容有不同于普通占位符的颜色，所以我必须使用普通的占位符。|4694407|<input+#birthDate
+++++++++class="birthDate+placeholder"
+++++++++type="date"
+++++++++formControlName="birthDate"
+++++++++placeholder="{{getBirthDatePlaceholder()+%7C+translate}}"
+++++++++[class.error]="!onboardingForm.controls.birthDate.valid+&&+onboardingForm.controls.birthDate.dirty"
+++++++++autocomplete="off"
+++++++++>|4694408|然后在模板中使用了viewchild+birthDate属性，以便能够从组件访问此输入。并在占位符属性上定义了一个角度表达式，它将决定我们是否显示占位符。这是该解决方案的主要缺点，是您必须管理占位符的可见性。|4694409|@ViewChild('birthDate')+birthDate;

getBirthDatePlaceholder()+{
++if+(!this.birthDate)+{
++++return;
++}+else+{
++++return+this.birthDate.nativeElement.value+===+''+?
++++'ONBOARDING_FORM_COMPONENT.HINT_BIRTH_DATE'+:
++++'';
++}
}|4694410|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>From Angular point of view I managed to put a placeholder in input type date element.</p>

<p>First of all I defined the following css:</p>

<pre><code>.placeholder {
    color: $text-grey;
  }

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

  input::-webkit-input-placeholder {
    color: $text-grey;
  }
</code></pre>

<p>The reason why this is neccessary is that if css3 content has different color that the normal placeholder, so I had to use a common one.</p>

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

<p>Then in the template used a viewchild birthDate attribute, to be able to access this input from the component. And defined an angular expression on the placeholder attribute, which will decide if we show the placeholder or not. This is the major drawback of the solution, is that you have to manage the visibility of the placeholder.</p>

<pre><code>@ViewChild('birthDate') birthDate;

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


blocks|key|4694434|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694435|<input+placeholder="Date"+type="text"+onMouseOver="(this.type='date')"+onMouseOut="(this.type='text')"++id="date"+class="form-control">|code-block|syntax|javascript|4694436|4694437|修改后的木乃伊规范|4694438|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input placeholder="Date" type="text" onMouseOver="(this.type='date')" onMouseOut="(this.type='text')"  id="date" class="form-control"&gt;</code></pre>
</div>
</div>
</p>

<p>Revised code of mumthezir</p>


blocks|key|4694483|text|如果你只关心移动端：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694484|input[type="date"]:invalid:before{
++++color:+rgb(117,+117,+117);
++++content:+attr(placeholder);
}|code-block|syntax|javascript|4694485|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>If you're only concerned with mobile:</p>

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


blocks|key|4694771|text|令我惊讶的是，只有一个答案与我使用的方法类似。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694772|我的灵感来自@Dtipson对@Mumthezir+VP的回答的评论。|4694773|为此，我使用了两个输入，一个是带有type="text"的假输入，我在其中设置了占位符，另一个是带有type="date"的真实字段。|offset|length|style|CODE|4694774|在容器上的mouseenter事件上，我隐藏了假输入并显示了真正的输入，而在mouseleave事件上做了相反的事情。显然，如果实际输入上设置了值，我会将其保留为可见。|4694775|我写代码是为了使用纯Javascript，但如果你使用jQuery+(我确实是)，它很容易“转换”。|4694776|​|4694777|//+"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+%7C%7C+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;+%2B%2Bi)+{
++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'));
++});
}|code-block|syntax|javascript|4694778|.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;
}|4694779|<div+class="date-container">
++<input+type="text"+class="fake-date"+placeholder="Insert+date">
++<input+type="date"+class="real-date">
</div>|4694780|4694781|我还在一部Android手机上测试了这一点，当用户点击datepicker显示的字段时，它就可以工作。唯一的问题是，如果实际输入没有值，并且用户在没有选择日期的情况下关闭了datepicker，则输入将保持可见，直到他们在其外部点击。不需要监听事件来知道何时datepicker关闭，所以我不知道如何解决这个问题。|4694782|我没有iOS设备来测试它。|4694783|entityMap^0|0|0|H|B|1E|B|0|5|A|12|A|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@$F|18|G|19|H|I]|$F|1A|G|1B|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1C|8|@$F|1D|G|1E|H|I]|$F|1F|G|1G|H|I]]|9|@]|A|$]]|$1|L|3|M|5|6|7|1H|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1I|8|@]|9|@]|A|$]]|$1|P|3|Q|5|R|7|1J|8|@]|9|@]|A|$S|T]]|$1|U|3|V|5|R|7|1K|8|@]|9|@]|A|$S|T]]|$1|W|3|X|5|R|7|1L|8|@]|9|@]|A|$S|T]]|$1|Y|3|O|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1N|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1O|8|@]|9|@]|A|$]]|$1|13|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|14|$]]

<p>I'm surprised there's only one answer with an approach similar to the one I used.<br>
I got the inspiration from @Dtipson's comment on @Mumthezir VP's answer.  </p>

<p>I use two inputs for this, one is a fake input with <code>type="text"</code> on which I set the placeholder, the other one is the real field with <code>type="date"</code>.<br>
On the <code>mouseenter</code> event on their container, I hide the fake input and show the real one, and I do the opposite on the <code>mouseleave</code> event. Obviously, I leave the real input visibile if it has a value set on it.<br>
I wrote the code to use pure Javascript but if you use jQuery (I do) it's very easy to "convert" it.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// "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) &amp;&amp; !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 &lt; 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'));
  });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="date-container"&gt;
  &lt;input type="text" class="fake-date" placeholder="Insert date"&gt;
  &lt;input type="date" class="real-date"&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I tested this also on an Android phone and it works, when the user taps on the field the datepicker is shown. The only thing is, if the real input had no value and the user closes the datepicker without choosing a date, the input will remain visible until they tap outside of it. There's no event to listen to to know when the datepicker closes so I don't know how to solve that.  </p>

<p>I don't have an iOS device to test it on.</p>


blocks|key|4694526|text|HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694527|<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>|code-block|syntax|javascript|4694528|JavaScript：|4694529|$('#inputDate').ready(function+()+{
$('#placeholder-inputDate').attr('style'
++++,+'top:+'+%2B+($('#placeholder-inputDate').parent().position().top+%2B+10)
++++%2B+'px;+left:+'+%2B+($('#placeholder-inputDate').parent().position().left+%2B+0)+%2B+'px;+position:+absolute;');
$('#inputDate').attr('style'
++++,+'width:+'+%2B+($('#placeholder-inputDate').width()+%2B+32)+%2B+'px;');
});|4694530|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>HTML:</p>

<pre><code>&lt;div&gt;
    &lt;input class="ui-btn ui-btn-icon-right ui-corner-all ui-icon-calendar ui-shadow" id="inputDate" type="date"/&gt;
    &lt;h3 id="placeholder-inputDate"&gt;Date Text&lt;/h3&gt;
&lt;/div&gt;
</code></pre>

<p>JavaScript:</p>

<pre><code>$('#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;');
});
</code></pre>


blocks|key|188616|text|这是不使用js而仍然使用css+content的另一个可能的技巧。请注意，由于某些浏览器不支持:after作为输入，因此我们需要以另一种方式选择输入，对于content+attr('')也是如此|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|188617|​|188618|input[type=date]:invalid%2Bspan:after+{
++content:"Birthday";
++position:absolute;
++left:0;
++top:0;
}

input[type=date]:focus:invalid%2Bspan:after+{
++display:none;
}

input:not(:focus):invalid+{
++color:transparent;
}

label.wrapper+{
	position:relative;
}|code-block|syntax|javascript|188619|<label+class="wrapper">
	<input
+	++type="date"
++	++required="required"+
	/>
	<span></span>
</label>|188620|188621|entityMap^0|G|7|1B|6|25|G|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Y|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|Z|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|10|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|Q|$]]

<p>Here is another possible hack not using js and still using css <code>content</code>. Note that as <code>:after</code> is not supported on some browser for inputs, we need to select the input in another way, same for <code>content attr('')</code></p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label class="wrapper"&gt;
	&lt;input
 	  type="date"
  	  required="required" 
	/&gt;
	&lt;span&gt;&lt;/span&gt;
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4694604|text|这对我来说很有效，使用下面的元素作为输入元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694605|<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">|code-block|syntax|javascript|4694606|此CSS显示一个永久占位符。选定的值显示在占位符之后。|4694607|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+*/
++++}
}|4694608|我将这个解决方案用于一个带有contact-+form+-7插件的Wordpress表单。|4694609|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>This works for me using this as input element:</p>

<pre><code>&lt;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"&gt;
</code></pre>

<p>This CSS shows a permanent placeholder. The selected value is shown after the placeholder.</p>

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

<p>I use this solution for a Wordpress form with contact-form-7 plugin.</p>


blocks|key|4694683|text|在iOS+12的Chrome上，没有一个解决方案对我来说是正确的，而且它们中的大多数都没有针对一个页面上可能的多个日期输入进行量身定制。我做了以下工作，基本上是在日期输入上创建一个假标签，并在点击时将其删除。我也删除了假标签，如果视口宽度超过992px。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694684|JS：|4694685|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();
++++});
}|code-block|syntax|javascript|4694686|CSS：|4694687|@media+(max-width:+991px)+{
++++input[type="date"]+{
++++++++padding-left:+calc(50%25+-+45px);
++++}

++++span.date-label+{
++++++++pointer-events:+none;
++++++++position:+absolute;
++++++++top:+2px;
++++++++left:+50%25;
++++++++transform:+translateX(-50%25);
++++++++text-align:+center;
++++++++height:+27px;
++++++++width:+70%25;
++++++++padding-top:+5px;
++++}
}|4694688|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>None of the solutions were working correctly for me on Chrome in iOS 12 and most of them are not tailored to cope with possible multiple date inputs on a page. I did the following, which basically creates a fake label over the date input and removes it on tap. I am also removing the fake label if viewport width is beyond 992px.</p>

<p>JS:</p>

<pre><code>function addMobileDatePlaceholder() {
    if (window.matchMedia("(min-width: 992px)").matches) {
        $('input[type="date"]').next("span.date-label").remove();
        return false;
    }

    $('input[type="date"]').after('&lt;span class="date-label" /&gt;');

    $('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();
    });
}
</code></pre>

<p>CSS:</p>

<pre><code>@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;
    }
}
</code></pre>


blocks|key|4694822|text|在某些情况下，这可能会有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694823|<input+type="text"+id="date"+onclick="this.type='date'"+onblur="this.type='text'"+placeholder="Date"+class="textbox-n"+name="myDate"+/>|code-block|syntax|javascript|4694824|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This might help in some situation.</p>
<pre><code>&lt;input type=&quot;text&quot; id=&quot;date&quot; onclick=&quot;this.type='date'&quot; onblur=&quot;this.type='text'&quot; placeholder=&quot;Date&quot; class=&quot;textbox-n&quot; name=&quot;myDate&quot; /&gt;
      
</code></pre>


blocks|key|4694874|text|在React中。我的案子！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694875|const+[date,+setDate]+=+useState(false)|code-block|syntax|javascript|4694876|然后|4694877|<input+type={`${date+==+true+?+"date"+:+"text"}`}+onFocus={()+=>+setDate(true)}+/>|4694878|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>In React. My Case!</p>
<pre><code>const [date, setDate] = useState(false)
</code></pre>
<p>then</p>
<pre><code>&lt;input type={`${date == true ? &quot;date&quot; : &quot;text&quot;}`} onFocus={() =&gt; setDate(true)} /&gt;
</code></pre>


blocks|key|4694349|text|基于Mathijs+Segers的评论，Mumthezir版本的扩展在iOS上工作得更好：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4694350|(使用了一些AngularJS，但希望您能理解。)|4694351|<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>|code-block|syntax|javascript|4694352|因为它们都包装在一个label中，所以单击span会自动将焦点放在input上。|offset|length|style|CODE|4694353|CSS：|4694354|.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;
}|4694355|entityMap^0|0|0|0|A|5|L|4|X|5|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]|$K|10|L|11|M|N]|$K|12|L|13|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|S|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|T|$]]

<p>Extension of Mumthezir's version that works better on iOS, based on Mathijs Segers' comment:</p>

<p>(Uses some AngularJS but hopefully you get the idea.)</p>

<pre><code>&lt;label style='position:relative'&gt;
    &lt;input type="date" 
           name="dateField" 
           onfocus="(this.type='date')"
           ng-focus="dateFocus=true" ng-blur="dateFocus=false" /&gt;
    &lt;span ng-if='!dateFocus &amp;&amp; !form.date' class='date-placeholder'&gt;
        Enter date
    &lt;/span&gt;
&lt;/label&gt;
</code></pre>

<p>Because it's all wrapped in a <code>label</code>, clicking the <code>span</code> automatically focuses the <code>input</code>.</p>

<p>CSS: </p>

<pre><code>.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;
}
</code></pre>


blocks|key|188019|text|您可以使用"value“属性，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|188020|<input+type="date"+value="Date"+class="textbox-n"+id="date"/>|code-block|syntax|javascript|188021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You could use the "value" attribute, for example:</p>

<pre><code>&lt;input type="date" value="Date" class="textbox-n" id="date"/&gt;
</code></pre>


<p>I am doing a phonegap app. When I am trying <code>type="date"</code> input field as shown below, it shows date picker in iPhone as I expected but it doesn't show the placeholder I have given. I found the same issue here in SO, but no solution anywhere.</p>

<pre><code> &lt;input placeholder="Date" class="textbox-n" type="date" id="date"&gt;
</code></pre>


Not showing placeholder for input type="date" field

Android

容器

jQuery

我正在做一个phonegap应用程序。当我尝试如下所示的type="date"输入字段时，它会像我预期的那样在iPhone中显示日期选择器，但它不会显示我给出的占位符。我在SO中发现了同样的问题，但没有任何解决方案。 <input placeholder="Date" class="textbox-n" type="date" id="date">

问不显示输入日期“type=”字段的占位符
EN

回答 29

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不显示输入日期“type=”字段的占位符EN

回答 29

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问不显示输入日期“type=”字段的占位符
EN