更新日期选择器

frontent/ops_vue_js/src/components/datePicker.vue

@@ -1,26 +1,38 @@
 <script setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import Litepicker from "litepicker";
+import { useI18n } from "vue-i18n";
+const { t, locale } = useI18n();
 
-const datepicker_inline = ref(null);
+const datepicker = ref(null);
+var picker = null
+
+watch(locale, () => {
+  picker?.setOptions({ lang: locale.value });
+});
 
 onMounted(() => {
   // @formatter:off
 
-  new Litepicker({
-    element: datepicker_inline.value,
-    lang: 'zh-cn',
+  picker = new Litepicker({
+    element: datepicker.value,
+    lang: locale.value,
     firstDay: 0,
-    buttonText: {
-      previousMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-left -->
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,
-      nextMonth: `<!-- Download SVG icon from http://tabler-icons.io/i/chevron-right -->
-    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
-    },
-    inlineMode: true,
-  });
+    format: "YYYY-MM-DD", // 日期格式
+
+    dropdowns: {
+      minYear: 1900, // 最小可选年份
+      maxYear: new Date().getFullYear() + 1, // 最大为当前年份
+      months: true, // 显示月份下拉
+      years: true, // 显示年份下拉
+    },
+    //inlineMode: true,
+  });
+});
+
+defineExpose({
+  datepicker,
   
-  // @formatter:on
 });
 </script>
 
@@ -54,13 +66,8 @@ onMounted(() => {
     <input
       class="form-control"
       placeholder="Select a date"
-      id="datepicker-icon-prepend"
-      value="2020-06-20"
+      ref="datepicker"
+      value=""
     />
   </div>
-
-  <div class="mb-3">
-    <label class="form-label">Inline datepicker</label>
-    <div class="datepicker-inline" ref="datepicker_inline"></div>
-  </div>
 </template>

frontent/ops_vue_js/src/views/settings/account.vue

@@ -1,8 +1,17 @@
 <script setup>
+import { onMounted, watch, ref } from 'vue'
 import settingNavigation from "@/components/settingNavigation.vue";
 import { useI18n } from "vue-i18n";
 import datePicker from "@/components/datePicker.vue";
 const { t } = useI18n();
+
+const datapicker = ref();
+
+function updataInfo() {
+  console.log("保存用户信息");
+  console.log("生日:", datapicker.value.datepicker.value);
+}
+
 </script>
 
 <template>
@@ -49,12 +58,11 @@ const { t } = useI18n();
                   </div>
                   <div class="col-md">
                     <div class="form-label">{{ t("settings.birthday") }}</div>
-                    <input type="text" class="form-control" />
-                    <datePicker />
+                    <datePicker ref="datapicker"/>
                     
                   </div>
                   <div>
-                    <button class="btn">{{ t("settings.save_changes") }}</button>
+                    <button class="btn" @click="updataInfo">{{ t("settings.save_changes") }}</button>
                   </div>
                 </div>
                 <h3 class="card-title mt-4">{{ t("settings.email") }}</h3>