coconut-leaf/frontend/src/views/Calendar.vue

<script setup lang="ts">
import { ref } from 'vue';
import DateTimePicker, { TabType } from '@/components/DateTimePicker.vue';

// NOTE: This is a temporary test harness for the DateTimePicker.
// It will be removed when the Calendar page is migrated for real.
const picker = ref<InstanceType<typeof DateTimePicker>>();
const testDate = ref<Date>(new Date());

const openPicker = () => {
  picker.value?.modal(testDate.value, TabType.Minute);
}

const onConfirm = (d: Date) => {
  testDate.value = d;
}
</script>

<template>
  <div class="container" style="margin-top: 1.25rem;">
    <a class="button is-primary" @click="openPicker">{{ testDate.toLocaleString() }}</a>
  </div>
  <DateTimePicker ref="picker" @confirm="onConfirm" />
</template>

<style scoped></style>