mirror of https://github.com/nocodb/nocodb
4 changed files with 68 additions and 62 deletions
@ -1,61 +0,0 @@
|
||||
<script setup lang="ts"> |
||||
import { inject } from 'vue' |
||||
|
||||
interface Props { |
||||
modelValue: any |
||||
} |
||||
|
||||
const props = defineProps<Props>() |
||||
|
||||
const emits = defineEmits(['update:modelValue', 'save']) |
||||
|
||||
const vModel = useVModel(props, 'modelValue', emits) |
||||
|
||||
const editEnabled = inject<boolean>('editEnabled') |
||||
</script> |
||||
|
||||
<template> |
||||
<v-menu> |
||||
<template #activator="{ props: menuProps }"> |
||||
<input v-model="vModel" class="value" v-bind="menuProps.onClick" /> |
||||
</template> |
||||
<div class="d-flex flex-column justify-center" @click.stop> |
||||
<v-time-picker v-model="vModel" /> |
||||
<v-btn small color="primary" @click="emits('save')"> |
||||
<!-- Save --> |
||||
{{ $t('general.save') }} |
||||
</v-btn> |
||||
</div> |
||||
</v-menu> |
||||
</template> |
||||
|
||||
<style scoped> |
||||
.value { |
||||
width: 100%; |
||||
min-height: 20px; |
||||
} |
||||
</style> |
||||
<!-- |
||||
/** |
||||
* @copyright Copyright (c) 2021, Xgene Cloud Ltd |
||||
* |
||||
* @author Naveen MR <oof1lab@gmail.com> |
||||
* @author Pranav C Balan <pranavxc@gmail.com> |
||||
* |
||||
* @license GNU AGPL version 3 or any later version |
||||
* |
||||
* This program is free software: you can redistribute it and/or modify |
||||
* it under the terms of the GNU Affero General Public License as |
||||
* published by the Free Software Foundation, either version 3 of the |
||||
* License, or (at your option) any later version. |
||||
* |
||||
* This program is distributed in the hope that it will be useful, |
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||
* GNU Affero General Public License for more details. |
||||
* |
||||
* You should have received a copy of the GNU Affero General Public License |
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>. |
||||
* |
||||
*/ |
||||
--> |
@ -0,0 +1,66 @@
|
||||
<script setup lang="ts"> |
||||
import dayjs from 'dayjs' |
||||
import { ReadonlyInj } from '~/context' |
||||
|
||||
const { modelValue } = defineProps<Props>() |
||||
|
||||
const emit = defineEmits(['update:modelValue']) |
||||
|
||||
interface Props { |
||||
modelValue: string |
||||
} |
||||
|
||||
const { isMysql } = useProject() |
||||
|
||||
const readOnlyMode = inject(ReadonlyInj, false) |
||||
|
||||
let isTimeInvalid = $ref(false) |
||||
const dateFormat = isMysql ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD HH:mm:ssZ' |
||||
|
||||
const localState = $computed({ |
||||
get() { |
||||
if (!modelValue) { |
||||
return undefined |
||||
} |
||||
|
||||
if (!dayjs(modelValue).isValid()) { |
||||
isTimeInvalid = true |
||||
return undefined |
||||
} |
||||
|
||||
return dayjs(modelValue) |
||||
}, |
||||
set(val?: dayjs.Dayjs) { |
||||
if (!val) { |
||||
emit('update:modelValue', null) |
||||
return |
||||
} |
||||
|
||||
if (val.isValid()) { |
||||
const time = val.format('HH:mm') |
||||
const date = dayjs(`1999-01-01 ${time}:00`) |
||||
emit('update:modelValue', date.format(dateFormat)) |
||||
} |
||||
}, |
||||
}) |
||||
</script> |
||||
|
||||
<template> |
||||
<a-time-picker |
||||
v-model:value="localState" |
||||
autofocus |
||||
:show-time="true" |
||||
:bordered="false" |
||||
use12-hours |
||||
format="HH:mm" |
||||
class="!w-full px-1" |
||||
:placeholder="isTimeInvalid ? 'Invalid time' : !readOnlyMode ? 'Select time' : ''" |
||||
:allow-clear="!readOnlyMode" |
||||
:input-read-only="true" |
||||
:open="readOnlyMode ? false : undefined" |
||||
> |
||||
<template #suffixIcon></template> |
||||
</a-time-picker> |
||||
</template> |
||||
|
||||
<style scoped></style> |
Loading…
Reference in new issue