当我的输入被禁用时，如何从日期输入字段中删除 dd-mm-yyyy答案

【问题标题】：How can i remove dd-mm-yyy from date input field when my input is disabled当我的输入被禁用时，如何从日期输入字段中删除 dd-mm-yyyy
【发布时间】：2018-10-10 12:04:42
【问题描述】：

我有一个日期输入字段，如果没有输入日期并且该字段被禁用，它应该隐藏日期格式，例如“dd/mm/yyyy”，但如果在字段中输入日期无论该字段是启用还是禁用，它都应该显示日期。

那么如何检查这样的条件。

if ( date is empty && field is disabled)
    set Transparent color

我尝试过的事情

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

https://codepen.io/veer3383/pen/ervYmr

在我当前的代码盘中，如果未输入日期，则在启用该字段时隐藏日期格式，在禁用该字段时显示格式

【问题讨论】：

标签： html css date pseudo-element pseudo-class

【解决方案1】：

您可以简单地切换占位符属性，而不是更改颜色，如果您使用的是 jquery，它将是：

$input=$( "input[type='date']" );
if($input.prop('disabled')){
    $input.attr('placeholder','');
    /*or change the value using .val() or colour usin .css('color','transparent') */
}

【讨论】：

【解决方案2】：

我已经这样解决了。

CSS

input[type="date"]:focus::before {
    content: none
}

.non-empty-date input[type="date"]:disabled::before {
    content: none;
}

.empty-date input[type="date"]:disabled::before {
    content: attr(data-placeholder);
    width: 100%;
}

模板（Vuetify 框架）

<v-text-field :class="[(loan.completionDate === null ) ? 'empty-date' : 'non-empty-date']" required="required" :clearable="!disabled" type="date" :disabled="disabled" v-model="loan.completionDate" label="Completion Date"
max="2999-12-31"></v-text-field>

【讨论】：