mirror of https://github.com/nocodb/nocodb
Muhammed Mustafa
2 years ago
3 changed files with 107 additions and 76 deletions
@ -1,91 +1,63 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import dayjs from 'dayjs' |
import dayjs from 'dayjs' |
||||||
import { computed } from '#imports' |
import customParseFormat from 'dayjs/plugin/customParseFormat' |
||||||
|
|
||||||
|
import { ColumnInj, ReadonlyInj } from '~/context' |
||||||
|
const { modelValue } = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
dayjs.extend(customParseFormat) |
||||||
|
|
||||||
interface Props { |
interface Props { |
||||||
modelValue: string |
modelValue: string |
||||||
} |
} |
||||||
|
|
||||||
const { modelValue } = defineProps<Props>() |
const columnMeta = inject(ColumnInj, null) |
||||||
|
const readOnlyMode = inject(ReadonlyInj, false) |
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']) |
let isDateInvalid = $ref(false) |
||||||
|
const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD' |
||||||
|
|
||||||
const localState = computed({ |
const localState = $computed({ |
||||||
get() { |
get() { |
||||||
if (!modelValue || !dayjs(modelValue).isValid()) { |
if (!modelValue) { |
||||||
return undefined |
return undefined |
||||||
} |
} |
||||||
|
|
||||||
return (/^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)).format('YYYY-MM-DD') |
if (!dayjs(modelValue).isValid()) { |
||||||
}, |
isDateInvalid = true |
||||||
set(val?: string) { |
return undefined |
||||||
if (dayjs(val).isValid()) { |
|
||||||
emit('update:modelValue', val && dayjs(val).format('YYYY-MM-DD')) |
|
||||||
} |
} |
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/* |
|
||||||
|
|
||||||
export default { |
return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
||||||
name: 'DatePickerCell', |
|
||||||
props: { |
|
||||||
value: [String, Date], |
|
||||||
}, |
}, |
||||||
computed: { |
set(val?: dayjs.Dayjs) { |
||||||
localState: { |
if (!val && !columnMeta?.rqd) { |
||||||
get() { |
emit('update:modelValue', null) |
||||||
if (!this.value || !dayjs(this.value).isValid()) { |
return |
||||||
return undefined |
} |
||||||
} |
|
||||||
|
|
||||||
return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD') |
|
||||||
}, |
|
||||||
set(val) { |
|
||||||
if (dayjs(val).isValid()) { |
|
||||||
this.$emit('input', val && dayjs(val).format('YYYY-MM-DD')) |
|
||||||
} |
|
||||||
}, |
|
||||||
}, |
|
||||||
date() { |
|
||||||
if (!this.value || this.localState) { |
|
||||||
return this.localState |
|
||||||
} |
|
||||||
return 'Invalid Date' |
|
||||||
}, |
|
||||||
parentListeners() { |
|
||||||
const $listeners = {} |
|
||||||
|
|
||||||
if (this.$listeners.blur) { |
|
||||||
$listeners.blur = this.$listeners.blur |
|
||||||
} |
|
||||||
if (this.$listeners.focus) { |
|
||||||
$listeners.focus = this.$listeners.focus |
|
||||||
} |
|
||||||
|
|
||||||
return $listeners |
if (val?.isValid()) { |
||||||
}, |
emit('update:modelValue', val?.format('YYYY-MM-DD')) |
||||||
}, |
|
||||||
mounted() { |
|
||||||
if (this.$el && this.$el.$el) { |
|
||||||
this.$el.$el.focus() |
|
||||||
} |
} |
||||||
}, |
}, |
||||||
} */ |
}) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<!-- <v-menu> --> |
<a-date-picker |
||||||
<!-- <template #activator="{ on }"> --> |
v-model:value="localState" |
||||||
<input v-model="localState" type="date" class="value" /> |
:bordered="false" |
||||||
<!-- </template> --> |
class="!w-full px-1" |
||||||
<!-- <v-date-picker v-model="localState" flat @click.native.stop v-on="parentListeners" /> --> |
:format="dateFormat" |
||||||
<!-- </v-menu> --> |
:placeholder="isDateInvalid ? 'Invalid date' : 'Select date'" |
||||||
|
:allow-clear="!readOnlyMode" |
||||||
|
:input-read-only="true" |
||||||
|
:open="readOnlyMode ? false : undefined" |
||||||
|
> |
||||||
|
<template v-if="readOnlyMode" #suffixIcon></template> |
||||||
|
</a-date-picker> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<style scoped> |
<style scoped></style> |
||||||
.value { |
|
||||||
width: 100%; |
|
||||||
min-height: 20px; |
|
||||||
} |
|
||||||
</style> |
|
||||||
|
|||||||
Loading…
Reference in new issue