el‐data‐picker - daniel-qa/Vue GitHub Wiki

el-data-picker

  • 時間選到分
<template>
    <div>
        <el-date-picker v-model="selectedDate"
                        type="datetime"
                        placeholder="選擇日期與時間"
                        format="YYYY-MM-DD HH:mm"
                        value-format="YYYY-MM-DD HH:mm"
                        :editable="false"
                        @change="updateMessage" />
        <p>您選擇的時間是：{{ selectedDate }}</p>
        <p>儲存的消息是：{{ newMsgSend }}</p>
    </div>
</template>

<script setup>
    import { ref } from 'vue'

    // 定義變數
    const selectedDate = ref(null)     // 綁定選擇的時間
    const newMsgSend = ref('')         // 儲存格式化時間字串（可改成 timestamp）

    // 更新消息的方法
    const updateMessage = (date) => {
        newMsgSend.value = date // 傳入的是格式化後的時間字串
    }
</script>
名稱 說明
type="datetime" 啟用日期與時間選擇（精確到分鐘）
format UI 顯示格式（使用者在輸入框中看到的時間格式）
value-format 綁定資料的格式（例如 'x' 表示 timestamp，毫秒級）
:editable="false" 禁止手動輸入，只能用點選方式選時間，避免格式輸入錯誤

日期选择器需要一个日期值（null 或日期字符串/对象），而 0 是一个数字，与日期类型不匹配。

所以将 new_msg_send 初始化为 ref(0)，要直接绑定到 el-date-picker ，需要做轉換為時間截記

範例 1

<template>
  <div>
    <el-date-picker
      v-model="dateValue"
      type="date"
      placeholder="选择日期"
      @change="updateMessage"
    />
    <p>您选择的日期是：{{ dateValue }}</p>
    <p>存储的消息是：{{ new_msg_send }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 用于绑定日期选择器的值
const dateValue = ref(null);
// 初始化为 0 的变量，用于存储处理后的日期
const new_msg_send = ref(0);

// 更新 new_msg_send 的方法
const updateMessage = (date) => {
  new_msg_send.value = date ? new Date(date).getTime() : 0; // 将日期转换为时间戳存储
};
</script>

<style scoped>
/* 可选样式 */
</style>
  • 將 Date 轉換時間截記方法 Timestamp 的作法
// 更新 new_msg_send 的方法
const updateMessage = (date) => {
  new_msg_send.value = date ? new Date(date).getTime() : 0; // 将日期转换为时间戳存储
};
  • 將 timestamp 轉為 DataType
 // 初始化 dateValue，如果 new_msg_send 不为 0，则设置 dateValue
 onMounted(() => {
     if (new_msg_send.value !== 0) {
         // 将时间戳转为日期对象，并赋值给 dateValue
         dateValue.value = new Date(new_msg_send.value);
     }
 });

範例 2

<template>
  <div>
    <el-date-picker
      v-model="selectedDate"
      type="date"
      placeholder="选择日期"
      @change="updateMessage"
    />
    <p>您选择的日期是：{{ selectedDate }}</p>
    <p>存储的消息是：{{ new_msg_send }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义变量
const selectedDate = ref(null); // 日期绑定的变量
const new_msg_send = ref(0);    // 用于存储的变量

// 更新消息的方法
const updateMessage = (date) => {
  new_msg_send.value = date; // 将选择的日期存储到 new_msg_send 中
};
</script>

关键点：

1 . 将 new_msg_send 定义为 ref，以便动态更新值。

2 . 使用 @change 事件监听日期变化，每次用户选择日期时调用 updateMessage 方法，将日期值存入 new_msg_send。

3 . 页面上会显示用户选择的日期和存储的消息。

这样你就可以动态存储并显示日期了！

Timestamp 轉成 年月日時分

// Timestamp 轉成 年月日時分
const formatDate = (date) => {
    if (!date) return ''; // 确保 date 有值
    const parsedDate = new Date(date); // 确保是 Date 类型
    if (isNaN(parsedDate)) return ''; // 如果日期无效，返回空字符串
    const year = parsedDate.getFullYear();
    const month = String(parsedDate.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
    const hours = String(parsedDate.getHours()).padStart(2, '0');
    const minutes = String(parsedDate.getMinutes()).padStart(2, '0');
    return `${year}-${month} ${hours}:${minutes}`;
};
⚠️ **GitHub.com Fallback** ⚠️