C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

日付のフォーマットを変更したい

[トピック内 4 記事 (1 - 4 表示)]  << 0 >>

■93534 / inTopicNo.1)  日付のフォーマットを変更したい
  
□投稿者/ ぬこ (5回)-(2019/12/19(Thu) 17:09:09)

分類:[JavaScript] 

JavaScript


お世話になっております。

テキストボックスに入力した日付(例:2019/10)をDate型に変換したいと考えております。

var startMon = "";
startMon = new Date($("#text_startMon ").val());

そこで上記のようにしたのですがInvalid Date(無効の日付)と表示され、上手くいきませんでした。

よく見るとDayがないのに気づいたので

var startMon = "";
startMon = new Date($("#text_startMon ").val() + "/" + "01");

と直したのですが、今度は何故か日付が2019/09/30となっていました。

どなたかわかる方宜しくお願い致します。


引用返信 編集キー/
■93535 / inTopicNo.2)  Re[1]: 日付のフォーマットを変更したい
□投稿者/ 魔界の仮面弁士 (2532回)-(2019/12/19(Thu) 17:56:05)
2019/12/19(Thu) 19:09:51 編集(投稿者)

No93534 (ぬこ さん) に返信
> テキストボックスに入力した日付(例:2019/10)をDate型に変換したいと考えております。

var s = $("#text_startMon ").val();
によって、s に "2019/10" が得られる状態なのですね。

"yyyy/MM" 以外の入力値、たとえば "H30/12" とか "2020-04" とか "" などが
入力された場合のチェックも、事前に組み込む必要があるかもしれません。


> startMon = new Date($("#text_startMon ").val());
> そこで上記のようにしたのですがInvalid Date(無効の日付)と表示され、上手くいきませんでした。

文字列を渡す手法はブラウザ依存性が強いため避けてください。
たとえば
  new Date("2019/10")
の場合、IE では NaN、Chrome では 2019年10月1日となります。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date


ブラウザーに依存させず、確実に 2019年10月1日時点の
日付が得られるようにしたいなら、入力された文字列を分解して
 startMon = new Date(2019, 9, 1); // 日本時間(時差+9時間)
もしくは
 startMon = new Date(Date.UTC(2019, 9, 1)); // 協定世界時(時差+0時間)
の形式で処理するのが確実です。前者は JST、後者は UTC 時間です。
月数は 0〜11 で指定する必要がある点に注意して下さい。

※前者は現地時間であり、必ずしもは JST とは限りません。


分解処理については、たとえばこんな感じ。


var strYM = $("#text_startMon ").val();

// 正しい年月指定になっているか確認する
if ( !/^\d{4}\/(0[1-9]|1[0-2])$/.test(strYM) )
{
 //
 // 不正な形式の場合
 //
} else {
 //
 // 正しい形式の場合
 //
 var ym = strYM.split(/\//);
 startMon = new Date(parseInt(ym[0], 10), parseInt(ym[1], 10) - 1, 1);
}


> 今度は何故か日付が2019/09/30となっていました。

たとえば、日本語の IE 環境の場合、通常は
ローカルタイムが日本標準時(+9時間)で実行されるため、
 // var dt = new Date("2019/10/01");
 var dt = new Date(2019, 9, 1);
 var s = dt.toJSON();
などは「"2019-09-30T15:00:00Z"」という文字列になりますし、
 var dt = new Date(Date.UTC(2019, 9, 1));
 var s = dt.toJSON();
の場合には「"2019-10-01T00:00:00Z"」という文字列になるでしょう。
引用返信 編集キー/
■93536 / inTopicNo.3)  Re[2]: 日付のフォーマットを変更したい
□投稿者/ 魔界の仮面弁士 (2533回)-(2019/12/19(Thu) 18:29:58)
No93535 (魔界の仮面弁士) に追記
> 文字列を渡す手法はブラウザ依存性が強いため避けてください。

以下、参考情報として。

[JavaScript の Date は罠が多すぎる]
https://qiita.com/labocho/items/5fbaa0491b67221419b4

[Moment.jsを使う]
https://qiita.com/osakanafish/items/5ef636bbcb2c3ef94953
引用返信 編集キー/
■93541 / inTopicNo.4)  Re[2]: 日付のフォーマットを変更したい
□投稿者/ ぬこ (6回)-(2019/12/20(Fri) 10:05:48)
No93535 (魔界の仮面弁士 さん) に返信
> ブラウザーに依存させず、確実に 2019年10月1日時点の
> 日付が得られるようにしたいなら、入力された文字列を分解して
>  startMon = new Date(2019, 9, 1); // 日本時間(時差+9時間)
> もしくは
>  startMon = new Date(Date.UTC(2019, 9, 1)); // 協定世界時(時差+0時間)
> の形式で処理するのが確実です。前者は JST、後者は UTC 時間です。
> 月数は 0〜11 で指定する必要がある点に注意して下さい。
>
> ※前者は現地時間であり、必ずしもは JST とは限りません。
>
> 分解処理については、たとえばこんな感じ。
>
> var strYM = $("#text_startMon ").val();
>
> // 正しい年月指定になっているか確認する
> if ( !/^\d{4}\/(0[1-9]|1[0-2])$/.test(strYM) )
> {
>  //
>  // 不正な形式の場合
>  //
> } else {
>  //
>  // 正しい形式の場合
>  //
>  var ym = strYM.split(/\//);
>  startMon = new Date(parseInt(ym[0], 10), parseInt(ym[1], 10) - 1, 1);
> }

ご回答ありがとうございます。
魔界の仮面弁士さんが例であげていただいたコードを用いて修正致しました。

下記修正文↓
var strYM = $("#text_startMon ").val();
// 正しい年月指定になっているか確認する
if (!/^\d{4}\/(0[1-9]|1[0-2])$/.test(strYM)) {
// 不正な形式の場合
} else {
// 正しい形式の場合
var ym = strYM.split(/\//);
startMon = new Date(Date.UTC(parseInt(ym[0], 10), parseInt(ym[1], 10) - 1, 1));

}

このような形にしたところ、上手くDate型として任意の日付を変更することができました。

> たとえば、日本語の IE 環境の場合、通常は
> ローカルタイムが日本標準時(+9時間)で実行されるため、
>  // var dt = new Date("2019/10/01");
>  var dt = new Date(2019, 9, 1);
>  var s = dt.toJSON();
> などは「"2019-09-30T15:00:00Z"」という文字列になりますし、
>  var dt = new Date(Date.UTC(2019, 9, 1));
>  var s = dt.toJSON();
> の場合には「"2019-10-01T00:00:00Z"」という文字列になるでしょう。

new Dateの後にDate.UTCを付け加えることによって、テキストボックスに2019/10と入れた通りの日付を取得することができました。

ありがとうございました。
解決済み
引用返信 編集キー/

このトピックをツリーで一括表示


トピック内ページ移動 / << 0 >>

このトピックに書きこむ