148 lines
2.8 KiB
Vue
148 lines
2.8 KiB
Vue
<template>
|
|
<v-row class="search-box">
|
|
<v-col v-if="label" :cols="labelCols">
|
|
<label for="" class="search-box-label">
|
|
<v-icon>mdi-checkbox-blank-circle</v-icon>
|
|
{{ label }}
|
|
</label>
|
|
</v-col>
|
|
<v-col :cols="label ? textCols : ''">
|
|
<template v-if="mode == 'date'">
|
|
<v-calendar
|
|
v-model="dateModel"
|
|
:mode="mode"
|
|
@input="datepickerChangeEvt($event)"
|
|
></v-calendar>
|
|
</template>
|
|
<template v-else-if="mode == 'dateRange'">
|
|
<v-date-picker
|
|
v-model="range"
|
|
is-range
|
|
@input="datepickerChangeEvt($event)"
|
|
>
|
|
<template v-slot="{ inputValue, inputEvents }">
|
|
<v-row>
|
|
<v-col class="pa-0">
|
|
<v-text-field
|
|
readonly
|
|
:value="inputValue.start"
|
|
v-on="inputEvents.start"
|
|
append-icon="mdi-calendar"
|
|
class="v-input__custom"
|
|
></v-text-field>
|
|
</v-col>
|
|
<v-col cols="1" class="pa-0"></v-col>
|
|
<v-col class="pa-0">
|
|
<v-text-field
|
|
readonly
|
|
:value="inputValue.end"
|
|
v-on="inputEvents.end"
|
|
append-icon="mdi-calendar"
|
|
class="v-input__custom"
|
|
></v-text-field>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
</v-date-picker>
|
|
</template>
|
|
<template v-else-if="mode == 'dateTimeRange'">
|
|
<v-date-picker
|
|
v-model="range"
|
|
mode="dateTime"
|
|
is-range
|
|
is24hr
|
|
@input="datepickerChangeEvt($event)"
|
|
>
|
|
<template v-slot="{ inputValue, inputEvents }">
|
|
<v-text-field
|
|
readonly
|
|
:value="`${inputValue.start} ~ ${inputValue.end}`"
|
|
v-on="inputEvents.start"
|
|
append-icon="mdi-calendar"
|
|
class="v-input__custom"
|
|
></v-text-field>
|
|
</template>
|
|
</v-date-picker>
|
|
</template>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
model: {
|
|
require: true,
|
|
},
|
|
label: {
|
|
type: String,
|
|
default: '',
|
|
require: false,
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
require: false,
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'date',
|
|
require: false,
|
|
},
|
|
labelCols: {
|
|
type: Number,
|
|
require: false,
|
|
default: 4,
|
|
},
|
|
textCols: {
|
|
type: Number,
|
|
require: false,
|
|
default: 7,
|
|
},
|
|
},
|
|
components: {
|
|
// VCalendar,
|
|
},
|
|
computed: {
|
|
dateRangeText() {
|
|
if (this.fromDateVal.length > 0) {
|
|
return this.fromDateVal.join(' ~ ');
|
|
} else {
|
|
return '';
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
fromDateVal: [],
|
|
fromDateMenu: false,
|
|
dateModel: null,
|
|
range: {
|
|
start: new Date(2020, 9, 12),
|
|
end: new Date(2020, 9, 16),
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
this.init();
|
|
},
|
|
methods: {
|
|
init() {
|
|
this.dateModel = this.model;
|
|
},
|
|
datepickerChangeEvt(e) {
|
|
this.$emit('update:model', e);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
::v-deep {
|
|
.v-text-field__details {
|
|
display: none;
|
|
}
|
|
.v-input__slot {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
</style>
|