web-dev-qa-db-ja.com

ionic 2 ion-datetimeISO形式の問題

予約フォームにion-datetimeを使用しています。挿入中は問題なく動作しています。しかし、挿入された予約日フォームの詳細をバックエンドから更新する必要がある場合、日付値がion-datetimeに表示されません。

以下は私のコードです：

pdate.html：

<ion-item class="border-bottom">
      <ion-label  class="ionselect" >Appointment Date:</ion-label>
      <ion-datetime name="appdate" displayFormat="YYYY MMM DD" [(ngModel)]="leadDetailsUpdate.appt_date"></ion-datetime>
</ion-item>

pdate.ts：

leadDetailsUpdate={
        appt_date:''
};

バックエンドから取得する日付形式は次のとおりです。appt_date: "2017-01-01"

以下は、コンソールに表示されるエラーメッセージです。

Error parsing date: "null". Please provide a valid ISO 8601 datetime format: https://www.w3.org/TR/NOTE-datetime

javascriptangulartypescriptionic2
7
Akash M

表示する前にISO形式に変換してください

var date = new Date('2017-01-01').toISOString()
console.log(date)
16
Gaurav Chaudhary

Gauravでさえ正しいですが、タイムゾーンが+0でない場合は、問題が発生する可能性があることがわかりました。私はどこかでこの解決策を見つけました：

_let tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
this.startTime = (new Date(this.myStartTime - tzoffset)).toISOString().slice(0,-1);
_

次に、私のHTMLには、次のように表示されます。

_<ion-datetime displayFormat="HH:mm" [(ngModel)]="startTime" (ionChange)="changeCheckOutStartTime()" style="padding-left: 21px"></ion-datetime>
_

そして、changeCheckOutStartTime()メソッドで、時間をかけて時間を作成します。

_changeCheckOutStartTime() {
   this.myStartTime = moment(this.startTime).toDate();
}
_
2
Carlos Roig

次のように、表示する前にISO形式を使用します。

_this.myDate = new Date('2017-01-01').toISOString()
_

時間の違いがあります。ブラウザごとに異なる処理が行われます。私の場合、5時間の差がありました（16/12/1702：00は16/12/1707：00になります）。

より良い方法は、モーメントを使用することですionicそのドキュメントで推奨されていますn（ https://ionicframework.com/docs/api/components/datetime/DateTime/#advanced-datetime -検証と操作 ）

例：

  1. ルートプロジェクトでコンソールを開き、インストールの瞬間：_npm install moment --S_。
  2. コンポーネントファイルにモーメントをインポートします：_import moment from 'moment';_。
  3. モデル変数の値を設定します：this.myDate = moment().format()。

パイプを作成するのが最善です。このデモをよくチェックしてください http://plnkr.co/edit/MHjUdC インスピレーション、グーグル運:)

1
Daniel Eduardo Delgado Diaz