199 lines
5.9 KiB
Markdown
199 lines
5.9 KiB
Markdown
# 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);
|