Как я могу удалить дд-мм-гггг из поля ввода даты, когда мой ввод отключен - PullRequest
Новая
       61

Как я могу удалить дд-мм-гггг из поля ввода даты, когда мой ввод отключен

0 голосов
/ 30 апреля 2018

У меня есть поле ввода даты, в котором, если дата не введена и поле отключено, следует скрыть формат даты, например, «дд / мм / гггг», но если дата введена в поле он должен показывать дату независимо от того, включено или выключено поле.

Итак, как можно проверить состояние следующим образом. 

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

В моей текущей кодовой панели, если дата не введена, она скрывает формат даты, если поле включено, при отключении поля отображается формат

Ответы [ 2 ]

0 голосов
/ 24 мая 2018

Я решил это таким образом.

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 Framework) 

<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>
0 голосов
/ 30 апреля 2018

вместо изменения цвета, вы можете просто переключить атрибут местозаполнителя, если вы используете jquery, то это будет: 

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