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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

8672閲覧

Js: カレンダーの日にちをたっぷしたらhtmlのinputに反映させたい。

rails_ruby

総合スコア87

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2019/01/17 04:42

前提・実現したいこと

jsでカレンダーを実装しています。
カレンダー内をtdをくりっくしたらそのクリックした箇所の日付を別途に用意しているinputに反映させたい。

発生している問題・エラーメッセージ

jsでカレンダーを表示させるところまでは出来たがその先の日にちをタップした時の日付を習得できずに困っています。

エラーメッセージ

該当のソースコード

html

1<div class="main users-new"> 2 <div class="container"> 3 <input type="text" value="today" onselect="click_date" readonly> 4 <div id="calendar"></div> 5 </div> 6</div>

js

1window.onload = function() { 2 // 現在の年月の取得 3 var current = new Date(); 4 var year = current.getFullYear(); 5 var month = current.getMonth() + 1; 6 7 // カレンダーの表示 8 var wrapper = document.getElementById('calendar'); 9 add_calendar(wrapper, year, month); 10} 11 12/** 13 * 指定した年月のカレンダーを表示する 14 * @param {object} wrapper - カレンダーを追加する親要素 15 * @param {number} year - 年の指定 16 * @param {number} month - 月の指定 17 */ 18function add_calendar(wrapper, year, month) { 19 // 現在カレンダーが追加されている場合は一旦削除する 20 wrapper.textContent = null; 21 22 // カレンダーに表示する内容を取得 23 var headData = generate_calendar_header(wrapper, year, month); 24 var bodyData = generate_month_calendar(year, month); 25 26 // カレンダーの要素を追加 27 wrapper.appendChild(headData); 28 wrapper.appendChild(bodyData); 29} 30 31/** 32 * 指定した年月のカレンダーのヘッダー要素を生成して返す 33 * @param {object} wrapper - カレンダーを追加する親要素 34 * @param {number} year - 年の指定 35 * @param {number} month - 月の指定 36 */ 37function generate_calendar_header(wrapper, year, month) { 38 // 前月と翌月を取得 39 var nextMonth = new Date(year, (month - 1)); 40 nextMonth.setMonth(nextMonth.getMonth() + 1); 41 var prevMonth = new Date(year, (month - 1)); 42 prevMonth.setMonth(prevMonth.getMonth() - 1); 43 44 // ヘッダー要素 45 var cHeader = document.createElement('div'); 46 cHeader.className = 'calendar-header'; 47 48 // 見出しの追加 49 var cTitle = document.createElement('div'); 50 cTitle.className = 'calendar-header__title'; 51 var cTitleText = document.createTextNode(year + '年' + month + '月'); 52 cTitle.appendChild(cTitleText); 53 cHeader.appendChild(cTitle); 54 55 // 前月ボタンの追加 56 var cPrev = document.createElement('button'); 57 cPrev.className = 'calendar-header__prev'; 58 var cPrevText = document.createTextNode('prev'); 59 cPrev.appendChild(cPrevText); 60 // 前月ボタンをクリックした時のイベント設定 61 cPrev.addEventListener('click', function() { 62 add_calendar(wrapper, prevMonth.getFullYear(), (prevMonth.getMonth() + 1)); 63 }, false); 64 cHeader.appendChild(cPrev); 65 66 // 翌月ボタンの追加 67 var cNext = document.createElement('button'); 68 cNext.className = 'calendar-header__next'; 69 var cNextText = document.createTextNode('next'); 70 cNext.appendChild(cNextText); 71 // 翌月ボタンをクリックした時のイベント設定 72 cNext.addEventListener('click', function() { 73 add_calendar(wrapper, nextMonth.getFullYear(), (nextMonth.getMonth() + 1)); 74 }, false); 75 cHeader.appendChild(cNext); 76 77 return cHeader; 78} 79 80/** 81 * 指定した年月のカレンダー要素を生成して返す 82 * @param {number} year - 年の指定 83 * @param {number} month - 月の指定 84 */ 85function generate_month_calendar(year, month) { 86 var weekdayData = ['日', '月', '火', '水', '木', '金', '土']; 87 // カレンダーの情報を取得 88 var calendarData = get_month_calendar(year, month); 89 90 var i = calendarData[0]['weekday']; // 初日の曜日を取得 91 // カレンダー上の初日より前を埋める 92 while(i > 0) { 93 i--; 94 calendarData.unshift({ 95 day: '', 96 weekday: i 97 }); 98 } 99 var i = calendarData[calendarData.length - 1]['weekday']; // 末日の曜日を取得 100 // カレンダー上の末日より後を埋める 101 while(i < 6) { 102 i++; 103 calendarData.push({ 104 day: '', 105 weekday: i 106 }); 107 } 108 109 // カレンダーの要素を生成 110 var cTable = document.createElement('table'); 111 cTable.className = 'calendar-table'; 112 113 var insertData = ''; 114 // 曜日部分の生成 115 insertData += '<thead>'; 116 insertData += '<tr>'; 117 for (var i = 0; i < weekdayData.length; i++) { 118 insertData += '<th>'; 119 insertData += weekdayData[i]; 120 insertData += '</th>'; 121 } 122 insertData += '</tr>'; 123 insertData += '</thead>'; 124 125 // 日付部分の生成 126 insertData += '<tbody>'; 127 for (var i = 0; i < calendarData.length; i++) { 128 if(calendarData[i]['weekday'] <= 0) { 129 insertData += '<tr>'; 130 } 131 insertData += '<td>'; 132 insertData += calendarData[i]['day']; 133 insertData += '</td>'; 134 if(calendarData[i]['weekday'] >= 6) { 135 insertData += '</tr>'; 136 } 137 } 138 insertData += '</tbody>'; 139 140 cTable.innerHTML = insertData; 141 return cTable; 142} 143 144/** 145 * 指定した年月のカレンダー情報を返す 146 * @param {number} year - 年の指定 147 * @param {number} month - 月の指定 148 */ 149function get_month_calendar(year, month) { 150 var firstDate = new Date(year, (month - 1), 1); // 指定した年月の初日の情報 151 var lastDay = new Date(year, (firstDate.getMonth() + 1), 0).getDate(); // 指定した年月の末日 152 var weekday = firstDate.getDay(); // 指定した年月の初日の曜日 153 154 var calendarData = []; // カレンダーの情報を格納 155 var weekdayCount = weekday; // 曜日のカウント用 156 for (var i = 0; i < lastDay; i++) { 157 calendarData[i] = { 158 day: i + 1, 159 weekday: weekdayCount 160 } 161 // 曜日のカウントが6(土曜日)まできたら0(日曜日)に戻す 162 if(weekdayCount >= 6) { 163 weekdayCount = 0; 164 } else { 165 weekdayCount++; 166 } 167 } 168 return calendarData; 169}

補足情報(FW/ツールのバージョンなど)

Javascript
HTML5
CSS

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

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

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

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

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

m.ts10806

2019/01/17 04:59

datepickerというプラグインがありますが、それを使わず自力でという話ですね?
m.ts10806

2019/01/17 05:00

回答はヒントだけでもよろしいのでしょうか。
rails_ruby

2019/01/17 05:08

プラグインは使わない方法でやっています。 そのため、どのようにコーディングすればいいかを知りたいですのですが、javascriptに関してあまり知識がないのでヒントだけだと理解できない可能性があるので厚かましいのですが、ご教授していただけると幸いです。
papinianus

2019/01/17 05:17

それは「タップした時の日付を習得できずに困っています」というのを越えて、取得したものをinputに設定するところまで知りたいという意味ですか?
rails_ruby

2019/01/17 05:24

ご回答された後でとても厚かまししいですが、もし可能であればそこまでご教授してくださると幸いです。
m.ts10806

2019/01/17 05:27

[javascript input 値 設定] で検索すれば幾らでも出てきます。
rails_ruby

2019/01/17 05:31

今ご教授してもらった内容で探しています。 tdでもクリックは一応できるものもカーソルが矢印のカーソルにならないため、aもしくはbuttonタグを中に埋め込む必要があります。
m.ts10806

2019/01/17 05:34 編集

機能すればカーソルそのままでも良いかと思いますが、気になるならhover時に矢印のカーソルにすると良いです。CSSでできます。 それが嫌ならbuttonタグで同様に日付を渡すようにするだけです。
papinianus

2019/01/17 05:39

タグは意味を定義するものです。ヤジルシというUI上の表現のために、マークアップを変更するのはおかしいので、mts10806様がおっしゃるようCSSでやってください。
rails_ruby

2019/01/17 05:49

mts10806様、papinianus様 てっきりカーソルのマークは変えられないものだと勘違いしていました。 そのため、おっしゃっていた大ことを調べてみたところ、cursor:default;でカーソルマークを変更することが出来ました。 また、開発者ツールでもクリック時に日にちを取得することが出来ましたのでお二人方から教えていただいたことを基にinputに反映できるようにしてみます。 ありがとうございました。 お二人方にベストアンサーをお付けしたいですが、今回はpapinianusさんの回答をベストアンサーにさせて頂きたいと思います。
m.ts10806

2019/01/17 05:51

cursorは指定次第では利用者のPCよ設定によって開発側の意図通りにならないこともあるのでご注意ください。
papinianus

2019/01/17 06:04

inputに反映するコードにしたんで。したんで…たんで…で…
guest

回答2

0

簡単にしたいならtdにonclickで日付渡して

js

1insertData += '<td onclick="setDate(\''+year+'-'+month+'-'+calendarData[i]['day']+'\')">';

その関数で受け取る

js

1function setDate(selectdate){ 2 console.log(selectdate); 3}

あとはそのinputに入れるだけですね。

投稿2019/01/17 05:10

m.ts10806

総合スコア80765

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

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

m.ts10806

2019/01/17 05:15

tdのクリックってブラウザ大丈夫だっけ・・・(Chromeでは動いた)
guest

0

ベストアンサー

csharp

1window.onload = function() { 2 // 現在の年月の取得 3 var current = new Date(); 4 var year = current.getFullYear(); 5 var month = current.getMonth() + 1; 6 7 // カレンダーの表示 8 var wrapper = document.getElementById('calendar'); 9 add_calendar(wrapper, year, month); 10} 11 12function handler(e) { 13 if(e.target.innerText === "") return; 14 const yearmonth = document.querySelector(".calendar-header__title").innerText; 15 document.querySelector("input").value = yearmonth + e.target.innerText + "日"; 16} 17/** 18 * 指定した年月のカレンダーを表示する 19 * @param {object} wrapper - カレンダーを追加する親要素 20 * @param {number} year - 年の指定 21 * @param {number} month - 月の指定 22 */ 23function add_calendar(wrapper, year, month) { 24 // 現在カレンダーが追加されている場合は一旦削除する 25 wrapper.textContent = null; 26 27 // カレンダーに表示する内容を取得 28 var headData = generate_calendar_header(wrapper, year, month); 29 var bodyData = generate_month_calendar(year, month); 30 31 // カレンダーの要素を追加 32 wrapper.appendChild(headData); 33 wrapper.appendChild(bodyData); 34 document.querySelectorAll("td").forEach(function (target) { 35 // 引数targetにはdiv要素が1つずつ渡されている 36 target.addEventListener('click', handler); 37 }); 38} 39

いちおうこう書いたものの、カスタムデータ属性などを使って、inputに設定したい値をtdにもっておいたほうがいい気がします。
(もちろん、年月を表示しているところから取ってもいいんですが)

querySelectorを雑につかってるので、クラスとかタグ名とかで引かずにすむように、取りたい場所やセットしたい場所には適切なidを付与することを推奨します。

投稿2019/01/17 05:07

編集2019/01/17 06:48
papinianus

総合スコア12705

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

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

rails_ruby

2019/01/17 06:38

ベストアンサーにさせて頂きました。(コメントしてから押すまで遅くなり申し訳ございません。) ちなみになんですが、次月や前月に進むボタンを押すと日付を取得出来ませんでした。 コンソールログでも確かめてみたのですが、取得されていませんでしたが、ご教授していただいたコードはそこまで対応していないということでしょうか?
papinianus

2019/01/17 06:49

してないですね。 イベントリスナの設定をadd_calendar関数の最後にもってきたのでこちらでは動くようになりました。
rails_ruby

2019/01/17 10:45

なるほど。私自身で月が変わっても月日を取得できるようにいろいろと試してみたのですが出来ませんでした。 もし可能であればどのようにしたらいいかアドバイスを頂くことはできないでしょうか?
papinianus

2019/01/17 23:47 編集

答え書き換えてます。その書き換えた答えで、こちらでは動く、という意味のコメントです。もう一度回答からコピペしてみて動きませんか? この書き換えた答えがアドバイスです。
rails_ruby

2019/01/18 07:07

ありがとうございました。デフォルト時のinputを今日の日付に表示させようとしていてコードを色々いじっていたのでうまく動かなかったのですが、提示していただいとコードに一旦全て戻したら動きました。 おそらくhandler関数でクリックされた時の日付をinputに入れているのかなと思うので、関数内で何もクリックしていない時は今日の日付をinput内に表示させるにはどうしたらいいのでしょうか? 愚策でwind.onload内に今日の日付を表示させるためにだけだらだらとコードを書いて、最後に document.getElementById("today").value = ymd; にして今日の日付を表示させたのですが、もしもっと簡単に書ける方法があればご教授して頂けないでしょうか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問