Vue.jsでサイトを作る際に日付入力にvuejs-datepickerを使うわけですが、
ブラウザ上で表示されてる日付とフォーム送信された日付がずれる事が。1
生年月日とか入力する時にカレンダーをポチポチするのは面倒なのでtypeable="true"
にしてキーボード入力を可能にしてますが、
入力方法によって設定される時間が変わります。
それはまぁ、別に良いとして。
このdate型をそのままPHPに投げたところ、PHP側で受けたデータがUTCだった。
// そのまま送る
axios.post('/test/', {date: this.hoge});
/** PHPで受けたデータ **/
// カレンダーポチで入力したデータ
2020-06-01T08:29:00.000Z
// キーボード入力したデータ
2020-05-31T15:00:00.000Z
・・・うん、日付かわっとるな。
カレンダーポチでも時間によって日付かわるな。
PHP側で補正するのも面倒なんで、js側で文字列に変換してから送るようにしてます。
// よくあるdateをstringに変換するやつ
const dateStr = this.hoge.getFullYear()
+ '-' + String(this.hoge.getMonth() + 1).padStart(2, '0')
+ '-' + String(this.hoge.getDate()).padStart(2, '0');
// '2020-06-01' になる
// stringを送るよ
axios.post('/test/', {date: dateStr});
以上
-
日本語OS上で、vuejs-datepicker のlocaleを"ja"にした環境での話です。他の環境は知らん。 ↩