3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vuejs-datepickerの入力データをPHPに渡したら日付が変わった?

Posted at

Vue.jsでサイトを作る際に日付入力にvuejs-datepickerを使うわけですが、
ブラウザ上で表示されてる日付とフォーム送信された日付がずれる事が。1

生年月日とか入力する時にカレンダーをポチポチするのは面倒なのでtypeable="true"にしてキーボード入力を可能にしてますが、

入力方法によって設定される時間が変わります。

  • カレンダーポチポチ
    20200612_ss01.png
    入力操作した時間が設定されてる

  • キーボード入力
    20200612_ss02.png
    00:00:00になってる

それはまぁ、別に良いとして。

この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});

以上

  1. 日本語OS上で、vuejs-datepicker のlocaleを"ja"にした環境での話です。他の環境は知らん。

3
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?