JavaScriptの日付入力について

Question

いつもお世話になってます。
JavaScriptについてご質問をさせて下さい。

現在asp.netで、日付を入力するテキストボックスを作成しているのですが、
数値のみの入力とスラッシュ付きの入力との両方で入力を出来るように実装したいと思っています。
※エラーを検知したらテキストボックスの背景色を変化。

例）20190101 or 2019/1/1 = 2019年1月1日
20191101 or 2019/11/1 = 2019年11月1日

数値のみの入力は無事に実装できたのですが、スラッシュ付きの場合はどうしたら良いのか分からず困っております。

        function startdatecheck() {
            //スラッシュ削除
            var reg = new RegExp("/", "g");
            var startdate = document.getElementById('<%=txtStart.ClientID%>').value.replace(reg, "");

            //null or 8文字ではない or 数値以外が入力されている場合は、テキストボックスの背景色を変える
            if (startdate == "" || startdate.length != 8 || isNaN(startdate)) {
                document.getElementById('<%=txtStart.ClientID%>').style.backgroundColor = '#db7093';
            }

            //年,月,日を取得
            else {
                var y = parseInt(startdate.substr(0, 4));
                var m = parseInt(startdate.substr(4, 2)) - 1;  //月は0～11で指定するため-1。
                var d = parseInt(startdate.substr(6, 2));
                var dt = new Date(y, m, d);

                //判定する
                if (y == dt.getFullYear() && m == dt.getMonth() && d == dt.getDate()) {
                    document.getElementById('<%=txtStart.ClientID%>').style.backgroundColor = '#ffffff';
                } else {
                   document.getElementById('<%=txtStart.ClientID%>').style.backgroundColor = '#db7093';
                }
                datecheck.call();
            }
        }

 　　　<asp:TextBox ID="txtStart" runat="server" onblur="startdatecheck()" MaxLength="10"  />
```　

スラッシュを削除して8文字の数値になれば、スラッシュ付きでも日付判定は出来るのですが、
問題は上の例に挙げたように、2019/1/1や2019/11/1など、**スラッシュを削除し8文字に満たない場合はエラーになってしまう**事です。

初歩的な質問で申し訳ありませんが、皆様よろしくお願いいたします。


【開発環境】
Window 10
Visual Studio2017
ASP.NET ver 4.7.3282.0

Comments

[退会済みユーザー]

今思い出しましたが、前のスレッドと同様に研修の課題ですか？　であれば、講師の方にお聞きになってはいかがですか？　ここで聞く話ではないと思いますよ。

[joyboy]

SurferOnWww さん
先日は大変失礼しました。
JavaScriptの知識を深めようと独学で学習しております。
昨日までIDを取るのも一苦労でしたが色々やってみようとおもいまして。

Answer 1

Ajax Control Toolkit の Calendar とか、jQuery UI の Datepicker を使うことをお勧めします。

Calendar Demonstration
https://ajaxcontroltoolkit.devexpress.com/Calendar/Calendar.aspx

Datepicker
http://jqueryui.com/datepicker/

Comments

[joyboy]

どちらも使いやすくて、見た目もgoodですね。こういうの欲しかったです。
Datepickerはソースも見れて勉強になります。
続けてご質問してすみませんが、テキストボックスの手入力を不可にして、カレンダーからの選択のみで日付選択ってできたりしますか？

[退会済みユーザー]

> テキストボックスの手入力を不可にして、カレンダーからの選択のみで日付選択ってできたりしますか？

紹介したものにはそういう機能はなさそうです。他に jQuery プラグインなどいろいろありそうなので、ググるなどして自分で調べてみてください。

[退会済みユーザー]

やりたいことはユーザー入力の検証ですか？　であれば、上に紹介したのは入力の際ユーザーに便宜を図るためだけのもので、検証目的に使うのは不適切です。

前の質問者さんのスレッド https://teratail.com/questions/182869 で言ったことと同じことを再度書きます。

テキストボックスにユーザーが入力した文字列を検証し、結果 OK だったら登録し、NG だったらエラーメッセージを表示してユーザーに再入力を促すということをしたいのですよね。

であれば、ASP.NET Web Forms に備わっている検証コントロールを使う一択です。それ以外は考えない方がいいでしょう。それを使えば、自動的に、クライアント側とサーバー側の両方で検証を行う機能を組み込んでくれます。

やり方がわからなければ、新たに別のスレッドを立てて質問してください。

初学者の方がユーザー入力の検証を「自前」でやるのは止めた方が良いと思います。セキュリティの問題もありますから。勉強のためだけのチャレンジということであっても、あまり成果は得られそうもありません。

[joyboy]

入力の際にユーザーの便宜を図るものと捉えて頂いて大丈夫です。
ASP.NETで日付入力をスラッシュ有り無しでどちらも行うにはどうすればいいのかと単純に気なりまして(^^;
セキュリティリスクなども考慮すると、今の私のPGレベルで「自前」は危険だと自覚しております。
ASP.NET Web Forms に備わっている検証コントロールについても、詳しく学んでいこうと思います。

[joyboy]

> 紹介したものにはそういう機能はなさそうです。他に jQuery プラグインなどいろいろありそうなので、ググるなどして自分で調べてみてください。

ご回答ありがとうございます。
調べてみたところ、それらしいものが見当たらなかったので確証が得られてスッキリしました。

[退会済みユーザー]

> ASP.NETで日付入力をスラッシュ有り無しでどちらも行うにはどうすればいいのかと単純に気なりまして

それに何の意味があるのか分かりません。JavaScript の勉強のためだけということにしても、あまり成果は得られそうもないと思います。実用とは離れた興味本位の質問であれば、質問の最初にその旨書いておいてください。実用本位で考えて回答しようとしている回答者・閲覧者の時間の無駄になったかもしれませんよ。

[joyboy]

実装意図に明確な説明が無く申し訳ありません。
いづれ実用目的に使用できるようにと独学で学習しようという思いがありました。
以降は質問冒頭に明記するよう心がけます。

[退会済みユーザー]

> いづれ実用目的に使用できるようにと独学で学習しようという思いがありました。

「null or 8文字ではない or 数値以外が入力されている場合は、テキストボックスの背景色を変える」とか書いてあるということは検証＆ユーザーに再入力を促す目的もあるのですよね。

であれば考え方の順番を変えるべきと思います。

まず、ASP.NET の標準の検証コントロールを使うことを考えて、その上でもし不足する部分があれば、不足部分を補うために何をすべきかを考えるべきだと思います。

例えば、形式は合っていても日付としてあり得ない入力（例： 2019/2/29 とか）にどう対処するかとか。

あと、重要なこととして、JavaScript はユーザーが無効にできるということを忘れてはいけません。なので、サーバー側での検証は必須です。ASP.NET の標準の検証コントロールはそのあたりも考えて作ってあります。

単純に JavaScript の質問をしたいのであれば、ASP.NET のタグは外して、ASP.NET とは関係ない内容で質問していただけるとありがたいです。ASP.NET に関係があると言われると、ASP.NET で使う上での実用性を考えた話にならざるを得ません。

[joyboy]

> JavaScriptはユーザーが無効にできる
知りませんでした。
JavaScriptの学習にばかり意識が行っていて、サーバー側での検証をする事をほとんど考えていませんでした。
研修過程で作ったシステムを独学でブラッシュアップし学習する目的で行っていましたが、SurferOnWwwさんがおっしゃるように、勉強のためだけのチャレンジということであっても、あまり成果は得られそうもないという意味が理解できました。

> 単純に JavaScript の質問をしたいのであれば、ASP.NET のタグは外して、ASP.NET とは関係ない内容で質問
ASP.NETを含めた内容の質問だとしたら私も勘違いすると思います。
すみません。気が付きませんでした。

Answer 2

作戦としてのアドバイスですが、
スラッシュを削除するというアプローチはしてはいけません。

201801/7みたいな混在した日付は許して良いのですか？
私のエンジニアの感性としてはこれは許すべきではありません。
つまり、「数値8桁」もしくは「数値4桁/数値1〜2桁/数値1〜2桁」のバリデートを用意した上で、システムへの送信時にどちらかの書き方に変換して利用するようにすべきでしょう。

今回の質問の作戦でやりたいのであれば、
スラッシュがあるかないかを見極める、スラッシュありならば2018/1/17という形式を認識したら20180117という文字列に修正する。
8桁の数値として後続の処理を行う。

こういう流れにするとスムーズに解決出来るでしょう。

Comments

[joyboy]

ご回答ありがとうございます。
やはりスラッシュを付けたり消したりってところから、仮に実装できたとしても不安定なプログラムには変わりなかったですね。
自分でも強引なやり方だと思っていました。
実装のポイントは、年4桁/月2桁/日2桁をバリデーションの部分でしょうか。
ここに重点を置いて実装してみようと思います。

Answer 3

正規表現で取得するのはどうでしょうか?
スラッシュ区切りであれば
[0-9]{4}/[0-9]{1,2}/[0-9]{1,2}
のような感じです
これだと0000/00/00でも反応してしまいますが、その辺はお好みでカスタマイズしてください

Comments

[joyboy]

正規表現での取得ばらスラッシュに左右される事なく値が取れますね。
不適切な値については、日付判定を行ってエラー処理を出そうと思います。
ご回答ありがとうございます！