tmagic-editor/packages/form/src/fields/DateTime.vue

<template>
  <TMagicDatePicker
    :model-value="model[name]"
    popper-class="magic-datetime-picker-popper"
    type="datetime"
    :size="size"
    :placeholder="config.placeholder"
    :disabled="disabled"
    :format="config.format || 'YYYY/MM/DD HH:mm:ss'"
    :value-format="config.valueFormat || 'YYYY/MM/DD HH:mm:ss'"
    :default-time="config.defaultTime"
    @update:model-value="changeHandler"
  ></TMagicDatePicker>
</template>

<script lang="ts" setup>
import { TMagicDatePicker } from '@tmagic/design';

import type { DateTimeConfig, FieldProps } from '../schema';
import { datetimeFormatter } from '../utils/form';
import { useAddField } from '../utils/useAddField';

defineOptions({
  name: 'MFormDateTime',
});

const props = defineProps<FieldProps<DateTimeConfig>>();

const emit = defineEmits<{
  change: [value: string];
}>();

useAddField(props.prop);

const value = props.model?.[props.name]?.toString();
if (props.model) {
  if (!value || value === 'Invalid Date') {
    props.model[props.name] = '';
  } else {
    props.model[props.name] = datetimeFormatter(
      props.model[props.name],
      '',
      props.config.valueFormat || 'YYYY/MM/DD HH:mm:ss',
    );
  }
}

const changeHandler = (v: string) => {
  emit('change', v);
};
</script>