删除 html5 类型=日期的输入元素中存在的默认值 text/placeholder

Question

我正在使用 html 类型为日期的输入元素，

<input type="date">

当我使用上面的元素时，它会创建一个默认的日期格式，即该输入元素中的 mm/dd/yyyy 文本。如何删除此默认文本？

我尝试在我的页面上添加以下样式，但它也隐藏了选定的日期值，

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

Answer 1

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

Answer 2

已接受的答案似乎不再适用于最新的 chrome 版本。在版本 50.0.2661.102 上测试它并没有工作。

通过添加这个来工作：

.mdl-textfield:not(.is-dirty) input::-webkit-datetime-edit {
     color: transparent; 
}

input:focus::-webkit-datetime-edit {
    color: rgba(255, 255, 255, .46) !important; 
}

Working sample

Source

Answer 3

可能的选择

HTML:

<input type='date' required>

CSS:

input[type=date]:required:invalid::-webkit-datetime-edit {
    color: transparent;
}
input[type=date]:focus::-webkit-datetime-edit {
    color: black !important;
}

Answer 4

实际上，您可以使用以下代码来利用 Chrome 生成的默认占位符。此代码也适用于从数据库中获取的日期：

<div class="Input">
    <script>
        function getDate() {
            var GET_DATE = document.getElementById("ThisElement").value="<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_FetchedResults["MySQLColumnName"]));?>";
            return  GET_DATE;
        }
    </script>

    <input class="form-control"
           style=" text-align: left; border: none;" 
           onfocus="(this.type='date')"  
           onblur="
               if(this.value===''){
                   this.type='text';
                   this.value='';
                   this.value= getDate();
               }
               else{
                   this.value;
               }"                       
           id="ThisElement"  
           type = "text" 
           value = "<?php echo $GetDateFromMySQL = date('d/m/Y', strtotime($row_ActiveStudents["ChaseUpDate"]));?>"                
     />

Answer 5

仅当未设置值时，这应该是透明的。

input[value="0000-00-00"]::-webkit-datetime-edit {
     color: transparent; 
}

Answer 6

从版本 73.0.3683.103 开始，这在 chrome 中对我有用

::-webkit-datetime-edit { color: transparent; }
:focus::-webkit-datetime-edit { color: #000; }

虽然我无法为 Edge 弄清楚，所以我将其更改为这个

input[type=date] { color: transparent !important; } 
.active input[type=date] { color: inherit !important; }

这对你们中的某些人来说可能不太好，但我还是添加了 class 活动，因为我的标签悬停在输入字段上，直到被点击，然后我将它们向上移开。因此，为什么我需要在标签位于输入

上方时不显示日期占位符

Answer 7

这在 chrome 中有效，并且在设置时不会使值消失（版本 74）

input[value=""]::-webkit-datetime-edit{ color: transparent; }
input:focus::-webkit-datetime-edit{ color: #000; }

Answer 8

<input name="date" type="text" onfocus="(this.type='date')" onblur="if(!this.value)this.type='text'">

感谢 Hai Nguyen。

Answer 9

这对我来说效果很好：

input[type=date]::-webkit-inner-spin-button,
  input[type=date]::-webkit-outer-spin-button {
    -webkit-appearance: none;
  }

  input[type=date] {
    -moz-appearance: textfield;
  }

Answer 10

我遇到了与 datetime-local 类似的问题，这对我有用，也许有人可以使用它。文本输入比日期时间更容易设置样式

type='text' required='' onfocus="this.type='datetime-local'" onblur="if(this.value==='')this.type='text'"

Answer 11

对于Chrome

input[type='date']:in-range::-webkit-datetime-edit-year-field,input[type='date']:in-range::-webkit-datetime-edit-month-field,input[type='date']:in-range::-webkit-datetime-edit-day-field,input[type='date']:in-range::-webkit-datetime-edit-text{  color: transparent;}

Answer 12

如果您只想隐藏 icon 占位符（为了使用您自己的图标），这对于 type="date" 的输入就足够了。 =17=] 和 type="time" 在 Edge 中，Chrome 和 Firefox：

::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; /* optional */ }

Answer 13

这可能晚了，但这对我有用。

document.addEventListener('focusin',function(e){
  e.target.type = 'date';
});

document.addEventListener('focusout',function(e){
  e.target.type = '';
});

<input class="my-date" placeholder="Select Appointment Date"/>

Answer 14

这对我有用

var input = document.querySelectorAll(".date-input");

input.forEach(function(e){
  e.addEventListener("focusin",function(ev){
    e.type = 'date';
  })
});
input.forEach(function(e){
  e.addEventListener("focusout",function(ev){
    e.type = 'text';
  })
});

Answer 15

综上所述，我认为最简单、最通用、最可靠的css建议如下：
input[value=""]:not(:focus) { color: transparent; }
在 Opera 83 和 Chrome 98 中对我来说效果很好。只是想知道为什么以前没有人把这个带到这里。

删除 html5 类型=日期的输入元素中存在的默认值 text/placeholder

Remove default text/placeholder present in html5 input element of type=date

html

css

date

仅当未设置值时，这应该是透明的。