60 lines
1.3 KiB
Vue
60 lines
1.3 KiB
Vue
<template lang="pug">
|
|
.flex.flex-col
|
|
.label(v-if="!!label") {{label}}
|
|
.field
|
|
input(
|
|
v-model="value",
|
|
type="date",
|
|
max="9999-12-31",
|
|
min="0000-01-01"
|
|
)
|
|
</template>
|
|
|
|
<script>
|
|
//TODO стили перенести для всего кита, избавиться от scoped
|
|
//TODO покрыть тестами
|
|
//TODO сделать серый цвет плейсхолдера
|
|
//TODO обработать ошибку при стирании даты
|
|
export default {
|
|
name: "BaseInputDate",
|
|
props: {
|
|
modelValue: Date,
|
|
label: String,
|
|
},
|
|
emits: ["update:modelValue"],
|
|
computed: {
|
|
value: {
|
|
get() {
|
|
return this.modelValue?.toISOString().split("T")[0];
|
|
},
|
|
set(value) {
|
|
this.$emit("update:modelValue", new Date(value));
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.field
|
|
display: flex
|
|
align-items: center
|
|
border: 1.5px solid var(--border-light-grey-color)
|
|
border-radius: 4px
|
|
padding: 8px 16px
|
|
input
|
|
width: 100%
|
|
cursor: text
|
|
border: none
|
|
outline: none
|
|
background: url("../../assets/icons/calendar-input.svg") no-repeat 100% 50%
|
|
&::-webkit-calendar-picker-indicator
|
|
opacity: 0
|
|
cursor: pointer
|
|
|
|
.label
|
|
font-weight: 600
|
|
font-size: 14px
|
|
line-height: 135%
|
|
</style>
|