2017-08-10 53 views
0

這個特定的格式,我需要這樣的輸出:我怎麼能做出與時刻

2017-08-11T16:11:00.000Z

我不知道這是什麼格式被調用。它似乎有這樣的格式,上面的一個,並且看起來像一個ATLEAST兩個變化:

2017年8月11日16:11:00 + 00:00

難道是相同的事情?爲什麼兩個變化?

現在我的問題,我與Vue2工作,特別是我使用這個組件:

http://element.eleme.io/#/en-US/component/datetime-picker

當它呈現日期用戶此組件顯示格式爲: 2017-08- 11 18時11分00秒

幕後,如果我檢查使用Vue的調試器是存儲像2017-08-11T16組件值:11:00.000Z

如果該值注意到它是ACTUA lly 2個小時的偏移量,我猜這個vue組件根據用戶選擇的時區和用戶時區在內部存儲UTC時間的值?

我得到了這個組件的開發者這個答覆,當我問他有什麼格式的值存儲內部組件:

的DateTimePicker的值是一個Date對象。您可以在將它發送到服務器之前將其格式化爲任何形式。

當我初始化這個組件我做這樣的:

<el-date-picker 
    v-model="dateTimePicker" 
    format="yyyy-MM-dd HH:mm" 
    type="datetime" 
    size='small' 
    placeholder="Pick a date"> 
</el-date-picker> 

dateTimePicker的變量初始化是這樣的:

dateTimePicker: moment.utc(this.initPublishedAtDate, 'YYYY-MM-DD HH:mm').local().format('YYYY-MM-DD HH:mm') 

dateTimePicker的被從被轉化爲正確的本地服務器分配的日期從UTC時間存儲在服務器上的時間。

現在一切正常,用戶看到正確的時間加載之前創建的東西,但現在如果用戶試圖保存他正在工作的任何東西,客戶端將發送任何在dateTimePicker和當前在新鮮的頁面dateTimePicker將在yyyy -MM-dd HH:mm格式

這當然是因爲用戶沒有使用過拾取的任何新時間,並且datepicker組件沒有更新dateTimePicker變量,而我的服務器期望使用新的格式正確的新值。

現在服務器會收到錯誤的時間,這是X小時的偏移量,並將錯誤的時間保存到數據庫。現在,如果用戶刷新頁面,時間將是錯誤的。每次用戶保存到服務器而不觸及datepicker組件時,日期將每次都抵消等等。

選項1: 我如何發送正確的時間服務器,如果用戶沒有使用日期選擇器組件和日期選擇器搞砸還沒有插入正確格式化時間?

選項2: 我可以用這種格式初始化datepicker組件:2017-08-11T16:11:00.000Z,這樣即使用戶對它沒有做任何事情,並且數據在保存時發送到服務器,服務器也會收到正確的時間。

如果我想用第二個選項來做,當我從服務器初始化dateTimePicker變量和日期時,如何生成該格式。

感謝您的建議。

+0

什麼類型的對象是'this.initPublishedAtDate'?一個字符串? –

+0

關於Z格式,它是ISO格式:https://stackoverflow.com/a/25713676/392102 –

+0

'2017-08-11T16:11:00.000Z'是[ISO 8601格式](https:// en。 wikipedia.org/wiki/ISO_8601)。第二種格式(不帶'T')不符合ISO標準。但'+00:00'和'Z'的意思是一樣的(「零點偏移」) – 2017-08-10 18:08:49

回答

1

基本上你想要做的是讓用戶進入並看到一個熟悉的格式的日期,但存放在ISO 8601的格式在數據庫中的日期。它傳遞的日期,時間選擇器之前

  1. 前端

    格式的日期和發送回之前再次格式化:

    可以在一對夫婦的方式做到這一點服務器。

    瞬間會自動識別ISO格式,因此將其轉換爲一個更人性化的版本使用:

    moment(date).format('YYYY-MM-DD HH:mm'); 
    

    編輯:日期,時間選擇器會自動施放moment實例爲Date實例因此可以避開format一步,只是做:

    moment(date); 
    

    要將其轉換回ISO需要指定當前格式:

    moment(date, 'YYYY-MM-DD HH:mm').toISOString(); 
    

    的範例:JSFiddle

  2. 後端

    取決於你使用,你將有許多不同的選擇的服務器技術,但最常見的是:

    • 中間件

      在您發送回覆之前和處理請求之前,請相應地格式化日期。

    • ORM存取器

      讀取從數據庫的日期和之後堅持它在DATABSE,格式之前它使用accessor和mutator(其基本上是美化了getter和setter分別地)。流行的ORM實現(如Laravel EloquentRuby on Rails' ActiveRecord)支持此操作。

+0

我注意到你的小提琴最初用一個字符串填充'date',但是datepicker將它改爲一個Date對象。 –

+0

如果您將它保留爲日期,它會簡化一些事情(更少的時間傳遞):https://jsfiddle.net/263sxLtf/1/ –

+0

您是對的,我更新了答案。 –

0

這個工程:

dateTimePicker: moment.utc(this.initPublishedAtDate, 'YYYY-MM-DD HH:mm').format('YYYY-MM-DDTHH:mm:ssZ')