thinkyu/教育訓練系統/Web/Scripts/vue-date-mixin-README.md

Vue Date Mixin 使用說明

概述

vue-date-mixin.js 是一個 Vue.js mixin，用於處理 ASP.NET ASMX Web Service 回傳的日期格式 /Date(timestamp)/。

功能

1. FormatDate(dateStr, separator)

將日期格式化為指定分隔符的格式。

參數:

• dateStr: 日期字串或 Date 物件
• separator: 日期分隔符，預設為 "-"

回傳值:

• 格式化後的日期字串

範例:

this.FormatDate('/Date(1764622110737)/');        // 回傳: "2025-12-02" (使用預設 "-")
this.FormatDate('/Date(1764622110737)/', '/');   // 回傳: "2025/12/02"
this.FormatDate('/Date(1764622110737)/', '.');   // 回傳: "2025.12.02"
this.FormatDate(new Date(), '-');                 // 回傳: "2025-01-15"

2. ConvertDatesInObject(obj, separator)

遍歷物件或陣列，自動轉換所有符合 ASP.NET ASMX 日期格式的屬性。

參數:

• obj: 要處理的物件或陣列
• separator: 日期分隔符，預設為 "-"

回傳值:

• 處理後的物件或陣列（所有日期欄位已轉換）

範例:

// 使用預設分隔符 "-"
const item = {
    編號: 1,
    生效日期: '/Date(1764622110737)/',
    備註: '測試'
};
const converted = this.ConvertDatesInObject(item);
// converted.生效日期 = "2025-12-02"

// 使用自訂分隔符 "/"
const converted2 = this.ConvertDatesInObject(item, '/');
// converted2.生效日期 = "2025/12/02"

// 處理陣列
const items = [
    { 編號: 1, 生效日期: '/Date(1764622110737)/' },
    { 編號: 2, 生效日期: '/Date(1764708510737)/' }
];
const converted = this.ConvertDatesInObject(items, '-');
// 所有項目的生效日期都會被轉換為 "YYYY-MM-DD" 格式

3. FormatDateTime(dateStr, separator)

將日期時間格式化為指定分隔符的格式。

參數:

• dateStr: 日期字串或 Date 物件
• separator: 日期分隔符，預設為 "-"

回傳值:

• 格式化後的日期時間字串

範例:

this.FormatDateTime('/Date(1764622110737)/');        // 回傳: "2025-12-02 14:35:10"
this.FormatDateTime('/Date(1764622110737)/', '/');   // 回傳: "2025/12/02 14:35:10"

使用方式

1. 引入 Mixin

在 .ascx.cs 檔案中註冊腳本：

Page.ClientScript.RegisterClientScriptInclude("DateMixin", 
    ParentPage.ResolveClientUrl("~/Scripts/vue-date-mixin.js"));

2. 在 Vue 實例中使用

function CreateApp() {
    app = new Vue({
        el: "#APP",
        mixins: [DateMixin],  // 加入 mixin
        data: {
            Items: []
        },
        methods: {
            SelectPage() {
                axios.post('/Services/XXX.asmx/SelectPage', data)
                    .then(response => {
                        const result = response.data.d || response.data;
                        
                        // 自動轉換所有日期欄位 (使用預設分隔符 "-")
                        const items = this.ConvertDatesInObject(result.data || []);
                        this.Items = items;
                        
                        // 或使用自訂分隔符 "/"
                        // const items = this.ConvertDatesInObject(result.data || [], '/');
                    });
            }
        }
    });
}

日期分隔符選項

常用分隔符

• "-" (預設): 2025-12-02
• "/": 2025/12/02
• ".": 2025.12.02
• "" (空字串): 20251202

使用建議

• ISO 8601 標準: 使用 "-" (例: 2025-12-02)
• 台灣慣用: 使用 "/" (例: 2025/12/02)
• 歐洲慣用: 使用 "." (例: 2025.12.02)
• HTML5 date input: 使用 "-" (必須是 YYYY-MM-DD 格式)

支援的日期格式

輸入格式

• ASP.NET ASMX 格式: /Date(1764622110737)/
• 標準 JavaScript Date 物件
• 任何可被 new Date() 解析的字串

輸出格式

• FormatDate: YYYY{sep}MM{sep}DD (例: 2025-12-02, 2025/12/02)
• FormatDateTime: YYYY{sep}MM{sep}DD HH:mm:ss (例: 2025-12-02 14:35:10)

注意事項

1. 預設分隔符: 如果不提供 separator 參數，預設使用 "-"
2. 自動遞迴處理: ConvertDatesInObject 會自動處理巢狀物件和陣列
3. 不改變原物件: 方法會回傳新的物件，不會修改原始資料
4. 安全性: 包含空值檢查和錯誤處理
5. 效能: 只處理符合 /Date( 格式的字串，避免不必要的轉換

完整範例

let app = null;

function CreateApp() {
    app = new Vue({
        el: "#APP",
        mixins: [DateMixin],
        data: {
            Items: []
        },
        methods: {
            LoadData() {
                axios.post('/Services/MyService.asmx/GetData', {})
                    .then(response => {
                        const result = response.data.d;
                        
                        if (result.success) {
                            // 使用預設分隔符 "-" (適用於 HTML5 date input)
                            this.Items = this.ConvertDatesInObject(result.data);
                            
                            // 或使用 "/" 分隔符 (適用於顯示)
                            // this.Items = this.ConvertDatesInObject(result.data, '/');
                        }
                    });
            },
            
            FormatSingleDate() {
                // 格式化單一日期
                const dateStr = '/Date(1764622110737)/';
                console.log(this.FormatDate(dateStr));       // "2025-12-02"
                console.log(this.FormatDate(dateStr, '/'));  // "2025/12/02"
            }
        }
    });
}

HTML5 Date Input 整合

當使用 HTML5 的 <input type="date"> 時，必須使用 "-" 分隔符：

<input type="date" v-model="EditingItem.生效日期"/>

// 載入時使用 "-" 分隔符
this.Items = this.ConvertDatesInObject(result.data, '-');

// 或省略參數使用預設值 "-"
this.Items = this.ConvertDatesInObject(result.data);