feat(settings/clock/date): implement

app/components/Settings/BottomScreen/Menus/Clock/Date.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+
+const store = useSettingsStore();
+const confirmationModal = useConfirmationModal();
+
+const now = new Date();
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  store.closeSubMenu();
+};
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <NumberInput
+    :model-value="now.getMonth() + 1"
+    title="Month"
+    :x="1 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="now.getDate()"
+    title="Day"
+    :x="5 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="now.getFullYear()"
+    title="Year"
+    :digits="4"
+    :x="9 * 16"
+    :disabled="true"
+  />
+
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+</template>

app/components/Settings/BottomScreen/Menus/Menus.vue

@@ -9,6 +9,7 @@ import UserColor from "./User/Color.vue";
 import UserBirthday from "./User/Birthday.vue";
 
 import ClockMenu from "./Clock/Menu.vue";
+import ClockDate from "./Clock/Date.vue";
 import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
@@ -164,6 +165,8 @@ const viewComponents: Record<string, Component> = {
   optionsLanguage: OptionsLanguage,
   optionsGbaMode: OptionsGbaMode,
 
+  clockDate: ClockDate,
+
   userColor: UserColor,
   userBirthday: UserBirthday,
 };

i18n/locales/en.json

@@ -33,7 +33,12 @@
     },
     "clock": {
       "title": "Clock",
-      "description": "Change date, time, and alarm settings."
+      "description": "Change date, time, and alarm settings.",
+
+      "date": {
+        "title": "Date",
+        "description": "Today's date."
+      }
     },
     "user": {
       "title": "User",