56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<script
|
|
setup
|
|
lang="ts"
|
|
>
|
|
const model = defineModel<string | number | null | undefined>({ required: true });
|
|
const is_date_picker_open = defineModel<boolean>('isDatePickerOpen', {default: false});
|
|
|
|
defineProps<{
|
|
label?: string | undefined;
|
|
requiresDatePicker?: boolean | undefined;
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<q-input
|
|
v-model="model"
|
|
dense
|
|
outlined
|
|
color="accent"
|
|
stack-label
|
|
label-slot
|
|
class="col q-px-sm q-py-xs"
|
|
>
|
|
<template #label>
|
|
<span
|
|
class="text-weight-bolder text-uppercase"
|
|
style="font-size: 0.85em;"
|
|
>
|
|
{{ label }}
|
|
</span>
|
|
</template>
|
|
|
|
<template #append v-if="requiresDatePicker">
|
|
<q-btn
|
|
flat
|
|
dense
|
|
size="lg"
|
|
icon="calendar_month"
|
|
color="accent"
|
|
@click="is_date_picker_open = true"
|
|
>
|
|
<q-dialog
|
|
v-model="is_date_picker_open"
|
|
backdrop-filter="none"
|
|
>
|
|
<q-date
|
|
v-model="model"
|
|
mask="YYYY-MM-DD"
|
|
color="accent"
|
|
@update:model-value="is_date_picker_open = false"
|
|
/>
|
|
</q-dialog>
|
|
</q-btn>
|
|
</template>
|
|
</q-input>
|
|
</template> |