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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

正規表現

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

Q&A

解決済

3回答

1419閲覧

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

yahret45

総合スコア41

JavaScript

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

正規表現

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

0グッド

1クリップ

投稿2017/03/12 04:16

編集2017/03/12 04:27

表題の件でご相談です。

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

イメージ説明

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

1月11日は、
20170111

11月1日は、
20171101

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

HTML

1 <select name="e_1973" id="e_1973"> <option value="" selected="selected">選択してください</option> 2 <option value="200">1月2日(土)11:00~<個別指導コース希望者向け説明会></option> 3 <option value="202">12月1日(日)14:00~<受験対策コース希望者向け説明会></option> 4 <option value="203">1月12日(水)19:30~<受験対策コース希望者向け説明会></option> 5 <option value="204">11月1日(土)11:00~<個別指導コース希望者向け説明会></option> 6 <option value="206">1月11日(日)14:00~<個別指導コース希望者向け説明会></option> 7 <option value="113">web説明会を希望 (全日コース希望)</option> 8 </select> 9<br> 10<br> 11<br> 12 <input type="text" name="" value="" id="date">

javascript

1 2$("#e_1973").on('change',function () { 3 var selectVal = $("#e_1973 option:selected").text(); 4 var selectVal2 = "2017年"+selectVal; 5 var ResString = selectVal2.replace( /(\d+)年(\d+)月(\d+)日/g , "$1$2$3" ); 6 console.log(ResString); 7 ResString3 = ResString.substring(0,ResString.indexOf("(")); 8 console.log(ResString3); 9 $('#date').val(ResString3); 10}); 11

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/03/12 04:35

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

2017/03/12 04:39

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

退会済みユーザー

2017/03/12 06:15

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

回答3

0

html

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

投稿2017/03/12 04:37

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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 04:41

編集2017/03/12 06:21
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yahret45

2017/03/12 08:07

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

2017/03/12 08:08

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

0

JavaScriptでゼロ埋めする方法

追記

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

JavaScript

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

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

JavaScript

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

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

JavaScript

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

投稿2017/03/12 04:25

編集2017/03/12 13:46
Zuishin

総合スコア28656

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yahret45

2017/03/12 04:37

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

2017/03/12 05:09 編集

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問