Question

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

那么如何检查这样的情况。

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

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

Answer 1

而不是改变颜色，你可以简单地切换占位符attr，如果你使用jquery它将是：

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

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

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

2 个答案: