mirror of https://github.com/nocodb/nocodb
Wing-Kam Wong
2 years ago
11 changed files with 281 additions and 234 deletions
@ -1,91 +1,60 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import dayjs from 'dayjs' |
import dayjs from 'dayjs' |
||||||
import { computed } from '#imports' |
import { ColumnInj, ReadonlyInj } from '~/context' |
||||||
|
|
||||||
interface Props { |
|
||||||
modelValue: string |
|
||||||
} |
|
||||||
|
|
||||||
const { modelValue } = defineProps<Props>() |
const { modelValue } = defineProps<Props>() |
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']) |
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
const localState = computed({ |
interface Props { |
||||||
get() { |
modelValue: string |
||||||
if (!modelValue || !dayjs(modelValue).isValid()) { |
|
||||||
return undefined |
|
||||||
} |
} |
||||||
|
|
||||||
return (/^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)).format('YYYY-MM-DD') |
const columnMeta = inject(ColumnInj, null) |
||||||
}, |
const readOnlyMode = inject(ReadonlyInj, false) |
||||||
set(val?: string) { |
|
||||||
if (dayjs(val).isValid()) { |
|
||||||
emit('update:modelValue', val && dayjs(val).format('YYYY-MM-DD')) |
|
||||||
} |
|
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/* |
let isDateInvalid = $ref(false) |
||||||
|
const dateFormat = columnMeta?.meta?.date_format ?? 'YYYY-MM-DD' |
||||||
|
|
||||||
export default { |
const localState = $computed({ |
||||||
name: 'DatePickerCell', |
|
||||||
props: { |
|
||||||
value: [String, Date], |
|
||||||
}, |
|
||||||
computed: { |
|
||||||
localState: { |
|
||||||
get() { |
get() { |
||||||
if (!this.value || !dayjs(this.value).isValid()) { |
if (!modelValue) { |
||||||
return undefined |
return undefined |
||||||
} |
} |
||||||
|
|
||||||
return (/^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value)).format('YYYY-MM-DD') |
if (!dayjs(modelValue).isValid()) { |
||||||
}, |
isDateInvalid = true |
||||||
set(val) { |
return undefined |
||||||
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) { |
return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
||||||
$listeners.blur = this.$listeners.blur |
}, |
||||||
} |
set(val?: dayjs.Dayjs) { |
||||||
if (this.$listeners.focus) { |
if (!val) { |
||||||
$listeners.focus = this.$listeners.focus |
emit('update:modelValue', null) |
||||||
|
return |
||||||
} |
} |
||||||
|
|
||||||
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' : !readOnlyMode ? '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> |
|
||||||
|
|||||||
@ -1,146 +1,62 @@ |
|||||||
<script setup lang="ts"> |
<script setup lang="ts"> |
||||||
import dayjs from 'dayjs' |
import dayjs from 'dayjs' |
||||||
import { computed, ref, useProject } from '#imports' |
import { ReadonlyInj } from '~/context' |
||||||
|
|
||||||
interface Props { |
|
||||||
modelValue?: string |
|
||||||
} |
|
||||||
|
|
||||||
const { modelValue } = defineProps<Props>() |
const { modelValue } = defineProps<Props>() |
||||||
|
|
||||||
const emit = defineEmits(['update:modelValue']) |
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
const { isMysql } = useProject() |
interface Props { |
||||||
const showMessage = ref(false) |
modelValue: string |
||||||
|
|
||||||
const localState = computed({ |
|
||||||
get() { |
|
||||||
if (!modelValue) { |
|
||||||
return modelValue |
|
||||||
} |
|
||||||
const d = /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
|
||||||
if (d.isValid()) { |
|
||||||
showMessage.value = false |
|
||||||
return d.format('YYYY-MM-DD HH:mm') |
|
||||||
} else { |
|
||||||
showMessage.value = true |
|
||||||
} |
|
||||||
}, |
|
||||||
set(value?: string) { |
|
||||||
if (isMysql) { |
|
||||||
emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss')) |
|
||||||
} else { |
|
||||||
emit('update:modelValue', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ')) |
|
||||||
} |
} |
||||||
}, |
|
||||||
}) |
|
||||||
|
|
||||||
/* import dayjs from 'dayjs' |
const { isMysql } = useProject() |
||||||
import utc from 'dayjs/plugin/utc' |
|
||||||
|
const readOnlyMode = inject(ReadonlyInj, false) |
||||||
|
|
||||||
dayjs.extend(utc) |
let isDateInvalid = $ref(false) |
||||||
|
const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ' |
||||||
|
|
||||||
export default { |
const localState = $computed({ |
||||||
name: 'DateTimePickerCell', |
|
||||||
props: { |
|
||||||
value: [String, Date, Number], |
|
||||||
ignoreFocus: Boolean, |
|
||||||
}, |
|
||||||
data: () => ({ |
|
||||||
showMessage: false, |
|
||||||
}), |
|
||||||
computed: { |
|
||||||
isMysql() { |
|
||||||
return ['mysql', 'mysql2'].indexOf(this.$store.getters['project/GtrClientType']) |
|
||||||
}, |
|
||||||
localState: { |
|
||||||
get() { |
get() { |
||||||
if (!this.value) { |
if (!modelValue) { |
||||||
return this.value |
return undefined |
||||||
} |
|
||||||
const d = /^\d+$/.test(this.value) ? dayjs(+this.value) : dayjs(this.value) |
|
||||||
if (d.isValid()) { |
|
||||||
this.showMessage = false |
|
||||||
return d.format('YYYY-MM-DD HH:mm') |
|
||||||
} else { |
|
||||||
this.showMessage = true |
|
||||||
} |
|
||||||
}, |
|
||||||
set(value) { |
|
||||||
if (this.isMysql) { |
|
||||||
this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ss')) |
|
||||||
} else { |
|
||||||
this.$emit('input', value && dayjs(value).format('YYYY-MM-DD HH:mm:ssZ')) |
|
||||||
} |
} |
||||||
}, |
|
||||||
}, |
|
||||||
parentListeners() { |
|
||||||
const $listeners = {} |
|
||||||
|
|
||||||
if (this.$listeners.blur) { |
if (!dayjs(modelValue).isValid()) { |
||||||
// $listeners.blur = this.$listeners.blur |
isDateInvalid = true |
||||||
} |
return undefined |
||||||
if (this.$listeners.focus) { |
|
||||||
$listeners.focus = this.$listeners.focus |
|
||||||
} |
} |
||||||
|
|
||||||
return $listeners |
return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
||||||
}, |
|
||||||
}, |
}, |
||||||
mounted() { |
set(val?: dayjs.Dayjs) { |
||||||
// listen dialog click:outside event and save on close |
if (!val) { |
||||||
if (this.$refs.picker && this.$refs.picker.$children && this.$refs.picker.$children[0]) { |
emit('update:modelValue', null) |
||||||
this.$refs.picker.$children[0].$on('click:outside', () => { |
return |
||||||
this.$refs.picker.okHandler() |
|
||||||
}) |
|
||||||
} |
} |
||||||
|
|
||||||
if (!this.ignoreFocus) { |
if (val.isValid()) { |
||||||
this.$refs.picker.display = true |
emit('update:modelValue', val?.format(dateFormat)) |
||||||
} |
} |
||||||
}, |
}, |
||||||
} */ |
}) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<input v-model="localState" type="datetime-local" /> |
<a-date-picker |
||||||
<!-- <div> --> |
v-model:value="localState" |
||||||
<!-- <div v-show="!showMessage"> --> |
:show-time="true" |
||||||
<!-- <v-datetime-picker --> |
:bordered="false" |
||||||
<!-- ref="picker" --> |
class="!w-full px-1" |
||||||
<!-- v-model="localState" --> |
format="YYYY-MM-DD HH:mm" |
||||||
<!-- class="caption xc-date-time-picker" --> |
:placeholder="isDateInvalid ? 'Invalid date' : !readOnlyMode ? 'Select date' : ''" |
||||||
<!-- :text-field-props="{ --> |
:allow-clear="!readOnlyMode" |
||||||
<!-- class: 'caption mt-0 pt-0', --> |
:input-read-only="true" |
||||||
<!-- flat: true, --> |
:open="readOnlyMode ? false : undefined" |
||||||
<!-- solo: true, --> |
> |
||||||
<!-- dense: true, --> |
<template v-if="readOnlyMode" #suffixIcon></template> |
||||||
<!-- hideDetails: true, --> |
</a-date-picker> |
||||||
<!-- }" --> |
|
||||||
<!-- :time-picker-props="{ --> |
|
||||||
<!-- format: '24hr', --> |
|
||||||
<!-- }" --> |
|
||||||
<!-- v-on="parentListeners" --> |
|
||||||
<!-- /> --> |
|
||||||
<!-- </div> --> |
|
||||||
<!-- <div v-show="showMessage" class="edit-warning" @dblclick="$refs.picker.display = true"> --> |
|
||||||
<!-- <!– TODO: i18n –> --> |
|
||||||
<!-- ERR: Couldn't parse {{ value }} --> |
|
||||||
<!-- </div> --> |
|
||||||
<!-- </div> --> |
|
||||||
</template> |
</template> |
||||||
|
|
||||||
<style scoped> |
<style scoped></style> |
||||||
/*:deep(.v-input),*/ |
|
||||||
/*:deep(.v-text-field) {*/ |
|
||||||
/* margin-top: 0 !important;*/ |
|
||||||
/* padding-top: 0 !important;*/ |
|
||||||
/* font-size: inherit !important;*/ |
|
||||||
/*}*/ |
|
||||||
|
|
||||||
/*.edit-warning {*/ |
|
||||||
/* padding: 10px;*/ |
|
||||||
/* text-align: left;*/ |
|
||||||
/* color: #e65100;*/ |
|
||||||
/*}*/ |
|
||||||
</style> |
|
||||||
|
|||||||
@ -0,0 +1,59 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import { ReadonlyInj } from '~/context' |
||||||
|
|
||||||
|
const { modelValue } = defineProps<Props>() |
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue']) |
||||||
|
|
||||||
|
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> |
||||||
Loading…
Reference in new issue