當AngularJs遇上日期時間時

當AngularJs遇上日期時間時

在玩轉AngularJs的時候,發現遇到DateTime的時候。AngularJs會有幾個狀況,1. Timezone 2. Input [type=Date]

先從第一點說起,

AngularJs 的filter功能可以將文字做特定格式的顯示,例如 date (ref: http://docs.angularjs.org/api/ng.filter:date)

也同時間會將要顯示的日期根據瀏覽器的timezone設定做轉換的動作。

這表示如果原本在資料庫裡面存的日期為DateTime.Now時,這樣在顯示上就會有問題。

C#的DateTime.Now ==> 本地時間

{{datetimeString | date}} ==> 將datetimeString 視為UTC TIME然後再根據瀏覽器的timezone再轉換成本地時間。

FYI: 可以透過下列參數得知目前所設定的timezoe

'Z': 4 digit (+sign) representation of the timezone offset (-1200-+1200)

那如果要顯示正確時間,那不是要更改timezone嗎? 但是,很不幸的是…You can not do that!!!!!

Timezones

Keep in mind that Angular datetime filter uses the time zone settings of the browser. So the same application will show different time information depending on the time zone settings of the computer that the application is running on. Neither Javascript nor Angular currently supports displaying the date with a timezone specified by the developer.

(http://docs.angularjs.org/guide/i18n)

所以看起來,只能將要存儲置資料庫的時間,全部以UTC的時間格式存入,然後要顯示的時候再轉換成本地時間了。

 

第二項,

Html5的input提供了許多輸入的格式,例如 tel, email, date, etc…

但是 <input type=[date] ng-model="date"> 怎樣就是沒有辦法綁到資料,在網路上找了很久,也都沒有找到答案。

看來只能透過其他的datepicker來處理日期欄位的介面了。

可參考

AngularStrap - Bootstrap directives for AngularJS.
http://mgcrea.github.io/angular-strap/