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