mirror of https://github.com/nocodb/nocodb
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.3 KiB
62 lines
1.3 KiB
<script setup lang="ts"> |
|
import dayjs from 'dayjs' |
|
import customParseFormat from 'dayjs/plugin/customParseFormat' |
|
|
|
import { ReadonlyInj } from '~/context' |
|
const { modelValue } = defineProps<Props>() |
|
|
|
const emit = defineEmits(['update:modelValue']) |
|
|
|
dayjs.extend(customParseFormat) |
|
|
|
interface Props { |
|
modelValue: number |
|
} |
|
|
|
const readOnlyMode = inject(ReadonlyInj, false) |
|
|
|
let isYearInvalid = $ref(false) |
|
|
|
const localState = $computed({ |
|
get() { |
|
if (!modelValue) { |
|
return undefined |
|
} |
|
|
|
const yearDate = dayjs(modelValue.toString(), 'YYYY') |
|
if (!yearDate.isValid()) { |
|
isYearInvalid = true |
|
return undefined |
|
} |
|
|
|
return yearDate |
|
}, |
|
set(val?: dayjs.Dayjs) { |
|
if (!val) { |
|
emit('update:modelValue', null) |
|
return |
|
} |
|
|
|
if (val?.isValid()) { |
|
emit('update:modelValue', Number(val?.format('YYYY'))) |
|
} |
|
}, |
|
}) |
|
</script> |
|
|
|
<template> |
|
<a-date-picker |
|
v-model:value="localState" |
|
picker="year" |
|
:bordered="false" |
|
class="!w-full px-1" |
|
:placeholder="isYearInvalid ? 'Invalid year' : !readOnlyMode ? 'Select year' : ''" |
|
:allow-clear="!readOnlyMode" |
|
:input-read-only="true" |
|
:open="readOnlyMode ? false : undefined" |
|
> |
|
<template v-if="readOnlyMode" #suffixIcon></template> |
|
</a-date-picker> |
|
</template> |
|
|
|
<style scoped></style>
|
|
|