# Vue Date Mixin 使用說明

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

## 功能

### 1. FormatDate(dateStr, separator)
將日期格式化為指定分隔符的格式。

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

**回傳值:**
- 格式化後的日期字串

**範例:**
```javascript
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`: 日期分隔符，預設為 `"-"`

**回傳值:**
- 處理後的物件或陣列（所有日期欄位已轉換）

**範例:**
```javascript
// 使用預設分隔符 "-"
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`: 日期分隔符，預設為 `"-"`

**回傳值:**
- 格式化後的日期時間字串

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

## 使用方式

### 1. 引入 Mixin
在 `.ascx.cs` 檔案中註冊腳本：
```csharp
Page.ClientScript.RegisterClientScriptInclude("DateMixin", 
    ParentPage.ResolveClientUrl("~/Scripts/vue-date-mixin.js"));
```

### 2. 在 Vue 實例中使用
```javascript
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(` 格式的字串，避免不必要的轉換

## 完整範例

```javascript
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">` 時，**必須**使用 `"-"` 分隔符：

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

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

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