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

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

ただいまの
回答率

90.34%

  • JavaScript

    17492questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • 正規表現

    830questions

    正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。

javascriptで問い合わせフォームのセレクトボックスの日付部分の値を解析してyyyymmdd形式で取り込みたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 473

yoshoo219

score 23

表題の件でご相談です。

セレクトボックスで選択された、○月○日の部分を文字列を取得して、
選択した時にyyyymmddの形式で下のテキストボックスに表示させたいと考えています。

イメージ説明

正規表現などを用いて文字列として表示する所まではできたのですが、1月11日を入力した時に「2017111」となっており、1月が01ではなく「1」と表示されてしまうので、1月11日と11月1日が同じ形で表示されてしまいます。

1月11日は、
20170111

11月1日は、
20171101

と表示させたいと考えております。
Dateオブジェクトの利用や正規表現について色々ググってみたのですが、
なかなかあてはまるものが無く、お知恵をお借りできますと幸いです。

    <select name="e_1973" id="e_1973">    <option value="" selected="selected">選択してください</option>
        <option value="200">1月2日(土)11:00~<個別指導コース希望者向け説明会></option>
        <option value="202">12月1日(日)14:00~<受験対策コース希望者向け説明会></option>
        <option value="203">1月12日(水)19:30~<受験対策コース希望者向け説明会></option>
        <option value="204">11月1日(土)11:00~<個別指導コース希望者向け説明会></option>
        <option value="206">1月11日(日)14:00~<個別指導コース希望者向け説明会></option>
        <option value="113">web説明会を希望 (全日コース希望)</option>
    </select>
<br>
<br>
<br>
    <input type="text" name="" value="" id="date">
$("#e_1973").on('change',function () {
    var selectVal = $("#e_1973 option:selected").text();
    var selectVal2 = "2017年"+selectVal;
    var ResString = selectVal2.replace( /(\d+)年(\d+)月(\d+)日/g , "$1$2$3" );
    console.log(ResString);
    ResString3 = ResString.substring(0,ResString.indexOf("("));
    console.log(ResString3);
    $('#date').val(ResString3);
});

どうぞよろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • SurferOnWww

    2017/03/12 13:35

    value="20170102" のようにしておくとか、01月02日(土)のようにしておくとかではダメなのですか?

    キャンセル

  • yoshoo219

    2017/03/12 13:39

    ご意見いただきありがとうございます。01月02日(土)のようにしておくのは見え方の点から考えておりません。また、こちらのvalueはツールで自動生成されるコードのため変更出来ない形となっております。

    キャンセル

  • SurferOnWww

    2017/03/12 15:15

    select / option 要素は自動生成されるのでいじれないという前提で回答欄に案を追記しておきます。

    キャンセル

回答 3

+4

<!DOCTYPE HTML>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>
            <select name="e_1973" id="e_1973">
                <option value="" data-date="" selected="selected">選択してください</option>
                <option value="200" data-date="0102">1月2日(土)11:00~<個別指導コース希望者向け説明会></option>
                <option value="202" data-date="1201">12月1日(日)14:00~<受験対策コース希望者向け説明会></option>
                <option value="203" data-date="0112">1月12日(水)19:30~<受験対策コース希望者向け説明会></option>
                <option value="204" data-date="1101">11月1日(土)11:00~<個別指導コース希望者向け説明会></option>
                <option value="206" data-date="0111">1月11日(日)14:00~<個別指導コース希望者向け説明会></option>
                <option value="113" data-date="">web説明会を希望 (全日コース希望)</option>
            </select>
        </p>
        <p>
            <input type="text" name="" value="" id="date">
        </p>
        <script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
            $('#e_1973').on('change', function () {
                var v = $(this).val();
                var dt = $(this).find('option[value=' + v + ']').attr('data-date');
                var y = (new Date()).getFullYear().toString();
                $('#date').val(y + dt);
            });
        </script>
    </body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+1

value="20170102" のようにしておくとか、01月02日(土)のようにしておくとかではダメなのですか? 

(コメント欄から移しました)

【追伸】

回答欄に移すのとコメントが前後してしまいました。すみません。

両方とも NG ということですと、プリミティブに、正規表現で取得した後の月と日の文字数を調べて処置するという方法ではダメなのでしょうか?

【追伸2】

select / option 要素は自動生成されるのでいじれないという前提で以下に案を追記しておきます。 

Zuishin さんの回答の「JavaScriptでゼロ埋めする方法」そのものですが、以下のようにしてできるはずです。

<script src="/Scripts/jquery-1.11.1.js" type="text/javascript"></script>
<script type="text/javascript"">
//<![CDATA[
    $(function () {
        $("#e_1973").on('change', function () {
            var selectedText = $("#e_1973 option:selected").text();
            selectedText = "2017年" + selectedText;
            var date = selectedText.match(/(\d+)年(\d+)月(\d+)日/);
            var year = date[1];
            var month = ("0" + date[2]).slice(-2);
            var day = ("0" + date[3]).slice(-2);

            $('#date').val(year + month + day);
        });
    });
//]]>
</script>

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/12 17:07

    重ねてアドバイス頂きまして誠にありがとうございました。大変助かりました。

    キャンセル

  • 2017/03/12 17:08

    重ねてアドバイス頂きまして誠にありがとうございました。大変助かりました。

    キャンセル

0

JavaScriptでゼロ埋めする方法

追記

ベストアンサーも決まったので、一応書いておきます。

$("#e_1973").on('change',function () {
    var selectVal = $("#e_1973 option:selected").text();
    var ResString = selectVal.replace(/(?:(\d+)年)?(\d+)月(\d+)日.*/, function(match, p1, p2, p3) {
        if (p1 === "") p1 = (new Date()).getFullYear();
        return p1 + ("0" + p2).slice(-2) + ("0" + p3).slice(-2);
    });
    console.log(ResString);
    $('#date').val(ResString);
});


今年は自動取得するようになっていますが、それでまずければ

if (p1 === "") p1 = (new Date()).getFullYear();


この部分を以下のようにします。

if (p1 === "") p1 = "2017";

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/03/12 13:37

    回答ありがとうございます。このやり方も一つだと思うのですが、11月の時に「011」になってしまいますよね。。

    キャンセル

  • 2017/03/12 13:43 編集

    インライン関数で置換すれば大丈夫です。そのやり方を書こうと思いましたが、Kosuke_Shibuya さんの方法がスマートなのでやめておきます。

    キャンセル

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

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

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

  • JavaScript

    17492questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • 正規表現

    830questions

    正規表現とは特定の文字列によるパターンマッチングを行う際に用いられる宣言型プログラミングです。