適用Angular版本為：>=2。本文同樣適用於Ionic這類的基於Angular實現的框架。 本文的思路也適用於控制項顯示的值和實際的值不一樣時實現雙向綁定。

1. 問題描述

在使用md2的datepicker控制項時，遇到這樣的問題，datepicker綁定的類型要求是Date類型，但是傳輸後台需要的類型是基於YYYY-MM-DD的日期字元串，但是Date類型默認轉換為字元串是這樣的：Fri Jun 02 2017 16:03:50 GMT+0800 (China Standard Time)，導致後台沒有正確的處理日期。

這個問題可以從後台處理，提供對應格式的反序列化，但是不是最佳方案。日期類型基於不同的語言區域平台，其默認生成的格式也是不一樣的。

那麼如何在前端從根源上處理呢？

2. 思路分析

剛開始考慮了兩種方案：

1、通過聲明getter、setter方法，綁定對應的getter、setter屬性，但是這樣會造成綁定時臟檢查的死循環問題，所以否定這種方案；

2、通過Pipe，來實現將字元串轉換為Date類型，實現綁定，但是這只能解決單向綁定，對於雙向綁定也無能為力。

最後，考慮能否結合以上兩種方案呢？

好的，結果是成功的，我們下面就來介紹如何一步一步的解決這個問題。

3. 問題解決

3.1. 示例model定義

這裡定義一個People的示例model，只有一個屬性birthday，為string類型。

import * as moment from "moment";

set ParseBirthday(val: Date){
this.birthday = moment(val).format("YYYY-MM-DD");
}
}

在這裡我們生成了一個setter方法，用來將Date類型數據轉換為對應格式的string類型。

代碼如下:

import { Pipe, PipeTransform } from "@angular/core";
import * as moment from "moment";

transform(value: string, format: string, ...args) {
if(!format) format = "YYYY-MM-DD";
if(!!value && moment(value, format).isValid){
var dVal = moment(value, format);
return dVal.toDate;
}
return null;
}
}

這個Pipe的目的就是將String類型轉換為Date，這裡可以傳遞一個format參數，為String類型對應的日期格式。

上面我們將原本基於[(ngModel)]的雙向綁定，拆分成了一個單向綁定[ngModel]和一個ngModelChange事件處理，其中[ngModel]的單向綁定，是通過3.2節中定義的Pipe將String類型的birthday轉換為Date類型進行綁定；然後當數據改變時，通過(ngModelChange)事件，通過setter方法將Date類型重新轉換為String，並賦值給birthday。

OK，問題解決了，完工。

附錄

本文中使用了Moment.js來進行日期格式處理，可以通過如下命令安裝相關依賴：

npm install moment --save

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！