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

这对我来说很好：

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

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

Answer 5

实际上，您可以使用以下代码利用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 6

这仅在未设置值时才透明。

true or false

Answer 7

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

这可能对某些人不利，但是无论如何我还是添加了活动类，因为我的标签一直悬停在输入字段上，直到单击为止，然后将它们向上移开。因此，为什么当标签在输入上方时我不需要显示日期占位符

Answer 8

这在chrome中有效，设置后不会消失（版本74）

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

Answer 9

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

感谢海阮。

Answer 10

我对datetime-local有类似的问题，这对我有用，也许有人可以使用它。文本输入比日期时间容易得多

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

删除type = date的html5输入元素中的默认文本/占位符

10 个答案:

这仅在未设置值时才透明。