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"> |
||||
import dayjs from 'dayjs' |
||||
import { computed } from '#imports' |
||||
import { ColumnInj, ReadonlyInj } from '~/context' |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
interface Props { |
||||
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() { |
||||
if (!modelValue || !dayjs(modelValue).isValid()) { |
||||
if (!modelValue) { |
||||
return undefined |
||||
} |
||||
|
||||
return (/^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue)).format('YYYY-MM-DD') |
||||
}, |
||||
set(val?: string) { |
||||
if (dayjs(val).isValid()) { |
||||
emit('update:modelValue', val && dayjs(val).format('YYYY-MM-DD')) |
||||
if (!dayjs(modelValue).isValid()) { |
||||
isDateInvalid = true |
||||
return undefined |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
/* |
||||
|
||||
export default { |
||||
name: 'DatePickerCell', |
||||
props: { |
||||
value: [String, Date], |
||||
return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
||||
}, |
||||
computed: { |
||||
localState: { |
||||
get() { |
||||
if (!this.value || !dayjs(this.value).isValid()) { |
||||
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 |
||||
} |
||||
set(val?: dayjs.Dayjs) { |
||||
if (!val) { |
||||
emit('update:modelValue', null) |
||||
return |
||||
} |
||||
|
||||
return $listeners |
||||
}, |
||||
}, |
||||
mounted() { |
||||
if (this.$el && this.$el.$el) { |
||||
this.$el.$el.focus() |
||||
if (val.isValid()) { |
||||
emit('update:modelValue', val?.format('YYYY-MM-DD')) |
||||
} |
||||
}, |
||||
} */ |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<!-- <v-menu> --> |
||||
<!-- <template #activator="{ on }"> --> |
||||
<input v-model="localState" type="date" class="value" /> |
||||
<!-- </template> --> |
||||
<!-- <v-date-picker v-model="localState" flat @click.native.stop v-on="parentListeners" /> --> |
||||
<!-- </v-menu> --> |
||||
<a-date-picker |
||||
v-model:value="localState" |
||||
:bordered="false" |
||||
class="!w-full px-1" |
||||
:format="dateFormat" |
||||
: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> |
||||
|
||||
<style scoped> |
||||
.value { |
||||
width: 100%; |
||||
min-height: 20px; |
||||
} |
||||
</style> |
||||
<style scoped></style> |
||||
|
||||
@ -1,146 +1,62 @@
|
||||
<script setup lang="ts"> |
||||
import dayjs from 'dayjs' |
||||
import { computed, ref, useProject } from '#imports' |
||||
|
||||
interface Props { |
||||
modelValue?: string |
||||
} |
||||
import { ReadonlyInj } from '~/context' |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
interface Props { |
||||
modelValue: string |
||||
} |
||||
|
||||
const { isMysql } = useProject() |
||||
const showMessage = ref(false) |
||||
|
||||
const localState = computed({ |
||||
const readOnlyMode = inject(ReadonlyInj, false) |
||||
|
||||
let isDateInvalid = $ref(false) |
||||
const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ' |
||||
|
||||
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')) |
||||
return undefined |
||||
} |
||||
}, |
||||
}) |
||||
|
||||
/* import dayjs from 'dayjs' |
||||
import utc from 'dayjs/plugin/utc' |
||||
|
||||
dayjs.extend(utc) |
||||
|
||||
export default { |
||||
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() { |
||||
if (!this.value) { |
||||
return this.value |
||||
} |
||||
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) { |
||||
// $listeners.blur = this.$listeners.blur |
||||
} |
||||
if (this.$listeners.focus) { |
||||
$listeners.focus = this.$listeners.focus |
||||
} |
||||
if (!dayjs(modelValue).isValid()) { |
||||
isDateInvalid = true |
||||
return undefined |
||||
} |
||||
|
||||
return $listeners |
||||
}, |
||||
return /^\d+$/.test(modelValue) ? dayjs(+modelValue) : dayjs(modelValue) |
||||
}, |
||||
mounted() { |
||||
// listen dialog click:outside event and save on close |
||||
if (this.$refs.picker && this.$refs.picker.$children && this.$refs.picker.$children[0]) { |
||||
this.$refs.picker.$children[0].$on('click:outside', () => { |
||||
this.$refs.picker.okHandler() |
||||
}) |
||||
set(val?: dayjs.Dayjs) { |
||||
if (!val) { |
||||
emit('update:modelValue', null) |
||||
return |
||||
} |
||||
|
||||
if (!this.ignoreFocus) { |
||||
this.$refs.picker.display = true |
||||
if (val.isValid()) { |
||||
emit('update:modelValue', val?.format(dateFormat)) |
||||
} |
||||
}, |
||||
} */ |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<input v-model="localState" type="datetime-local" /> |
||||
<!-- <div> --> |
||||
<!-- <div v-show="!showMessage"> --> |
||||
<!-- <v-datetime-picker --> |
||||
<!-- ref="picker" --> |
||||
<!-- v-model="localState" --> |
||||
<!-- class="caption xc-date-time-picker" --> |
||||
<!-- :text-field-props="{ --> |
||||
<!-- class: 'caption mt-0 pt-0', --> |
||||
<!-- flat: true, --> |
||||
<!-- solo: true, --> |
||||
<!-- dense: true, --> |
||||
<!-- hideDetails: true, --> |
||||
<!-- }" --> |
||||
<!-- :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> --> |
||||
<a-date-picker |
||||
v-model:value="localState" |
||||
:show-time="true" |
||||
:bordered="false" |
||||
class="!w-full px-1" |
||||
format="YYYY-MM-DD HH:mm" |
||||
: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> |
||||
|
||||
<style scoped> |
||||
/*: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> |
||||
<style scoped></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