質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

JavaScriptの日付入力について

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,229

joyboy

score 26

いつもお世話になってます。
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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • SurferOnWww

    2019/04/16 20:17

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

    キャンセル

  • joyboy

    2019/04/16 21:20

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

    キャンセル

回答 3

checkベストアンサー

+2

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

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

Datepicker
http://jqueryui.com/datepicker/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/17 10:56

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

    キャンセル

  • 2019/04/17 11:45 編集

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

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

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

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

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

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

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

    キャンセル

  • 2019/04/17 14:06 編集

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

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/16 22:10

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

    キャンセル

+1

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/16 22:05

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る