Javascript: <table>の<td>をクリックすると<td>内にある情報を<input text>に反映させたい。

Question

前提・実現したいこと

簡単なカレンダーを実装しています。
カレンダーの日にちをクリックするとその日の日付と時間を<input text>に反映させたい。

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

下記の一文で実現したい処理を書いたのですが、動きませんでした。

document.querySelector("input").write("今日は" + month + "月"+ day + "日です。");

該当のソースコード

<div id="calendar"></div>
<input type="text" class= "text" id="acdn-target" onselect="click_date" readonly>

<!-- JS -->
<script>
{
  const
    day_name = [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
    day_jname = ['(Sun.)', '(Mon.)', '(Tue.)', '(Wed.)', '(Thurs.)', '(Fri.)', '(Sat.)'],
    doc = document;

  const
    A = (e, ...a) => a.map (a => e.appendChild (doc.createElement (a))),
    B = (d, n) => d.setDate (d.getDate () + n),
    C = d => [d.getFullYear (), '年', d.getMonth () + 1 , '月'].join (''),
    D = d => [('0' + d.getHours ()).slice (-2), ('0' + d.getMinutes ()).slice (-2)].join (':'), 
    E = (e, d) => {
      let
        [a,,b] = A (e, 'label', 'br', 'label'),
        w = d.getDay () ;
      a.textContent = d.getDate ();
      b.textContent = day_jname[w];
      e.classList.add (day_name[w]);
    },
    F = d => {
      let m = d.getMonth (); 
      return [0,31,59,90,120,151,181,212,243,273,304,334][m] + d.getDate() - 1 +
      (new Date (d.getFullYear (), m + 1,0) === 29 && 0 < m);
    },
    G = ary => ary.reduce ((a, b) => {
        let
          c = typeof b === 'string' ? new Date (b +':00.000+09:00'): b,
          d = D (c);
        if (! (d in a)) a[d] = [];
        a[d][F(c)] = true;
        return a;
      }, { })
    ,
    H = d => new Date (d.getFullYear (), d.getMonth (), d.getDate ()),
    I = d => [('0' + d.getUTCHours ()).slice (-2), ('0' + d.getUTCMinutes ()).slice (-2)].join (':')
    ;


  class Shedule {
    constructor (date = new Date, range = 7, plan = []) {
      this.current = H (date);
      this.date = H (date);
      this.range = range;
      this.plan = G (plan);
      this.table = document.createElement ('table');

      this.remake ();
    }


    add (day = this.range) {
      let d = H (this.current);
      d.setDate (d.getDate () + day);
      if (+this.date <= +d) {
        this.current = d;
        this.remake ();
      }
    }


    remake () {
      this.prev_btn = this.next_btn = null;
      let t = this.table;
      [...t.childNodes].forEach (e => e.remove ());

      let
        h = t.createTHead (),
        tr0 = h.insertRow (-1),
        tr1 = h.insertRow (-1),
        d = H (this.current),
        s = tr0.insertCell (-1),
        c = 1,
        m = d.getMonth ();

      for (let i = 0; i < this.range; i++, c++, B (d, 1)) {
        let td = tr1.insertCell (-1);
        if (m !== d.getMonth ()) {
          s.colSpan = c - 1;
          s = tr0.insertCell (-1);
          m = d.getMonth ();
          c = 1;
        }
        s.textContent = C (d);
        E (td, d);
      }
      s.colSpan = c - 1;

      let e = tr0.insertCell (0);
      e.textContent = '前の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.prev_btn = e;

      e = tr0.insertCell (-1);
      e.textContent = '次の一週間';
      e.classList.add ('button');
      e.rowSpan = 2;
      this.next_btn = e;

      //__      
      let
        begin = new Date (Date.UTC (1970,0,1, 9, 0)),//列のスタート時間
        end   = new Date (Date.UTC (1970,0,1,11, 30)),//列の終了時間
        step  = new Date (Date.UTC (1970,0,1, 0,30)),//列の感覚調整時間
        o = F (this.current),
        rst = [ ];

      for (let d = begin; d < end; d = new Date (+step + (+d))) {
        let
          a = new Array (this.rangi),
          b = I (d),
          c = this.plan[b] || [];

        for (let i = 0; i < this.range; i++)
          a[i] = c[o + i] ? '-' : '◎';

        rst.push ([b, ...a, b]);
      }

     let [tb] = A (t, 'tbody');
     rst.forEach (r => {
       let tr = tb.insertRow (-1);
       r.forEach (c => tr.insertCell (-1).textContent = c)
     });            

    }

    handleEvent ({target: t}) {
      if (t === this.prev_btn) this.add (-this.range);
      if (t === this.next_btn) this.add (this.range);
    }

  }

  this.Shedule = Shedule;
}

const BUSY = [
  '2019-02-12T10:00'
];

let c = new Shedule (new Date,7,BUSY), {table: d} = c;
document.querySelector ('#calendar').appendChild (d);
d.addEventListener ('click', c, false);

var today = new Date();
var month = today.getMonth() + 1;
var day = today.getDate();
document.write("今日は" + month + "月"+ day + "日です。");
document.querySelector("input").write("今日は" + month + "月"+ day + "日です。");
</script>

試したこと

querySelectorを使用して意図した処理を実装しようとしたのですが、出来ませんでした。
javascriptについては初学者のためもしお分かりになりましたらご教授のほどよろしくお願い申し上げます。

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

Javascript

Answer 1

document.querySelector('#calendar tbody').addEventListener('click', event => {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'td') {
    return true;
  }

  const time = target.parentNode.cells[0].textContent;
  const table = target.closest('table');
  const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent;
  document.getElementById('acdn-target').value = date + time;
  return true;
}, false);

年月を取得するのは骨が折れるので、あらかじめカレンダー作成時にデータを入れておいたほうがいいのでは？
そうすれば余計なセルクリックも取得しなくて済みますし。

<td data-date="2019-01-31">

-- 18:15 修正・年月取得版追加

document.querySelector('#calendar').addEventListener('click', event => {
  const target = event.target;
  if (target.nodeName.toLowerCase() !== 'td') {
    return true;
  }

  if (!(target.closest('tbody') && 1 <= target.cellIndex && target.cellIndex <= 7)) {
    return true;
  }

  const time = target.parentNode.cells[0].textContent;
  const table = target.closest('table');
  const date = table.tHead.rows[1].cells[target.cellIndex - 1].textContent;
  const ymrow = table.tHead.rows[0];
  const ym = (target.cellIndex <= ymrow.cells[1].colSpan ? ymrow.cells[1] : ymrow.cells[2]).textContent;
  document.getElementById('acdn-target').value = ym + date + time;
  return true;
}, false);

Comments

[rails_ruby]

ありがとうございます。動きました。
ちなみにinput textに月も反映させたいので下記のようにしてみたのですが、動きませんでした。もし差し支えがなければ、年、月の表示に関してどのようにコードを書けばいいのか教えて頂けないでしょうか？
const month = tablet.getMonth.textContent;

[x_x]

tablet ってどこから来ましたかね？
すでに回答に書いた通り、作成時に保持したほうが楽です。

[rails_ruby]

あ、勘違いしていました。
ご迷惑おかけして申し訳ありませんでした。

[rails_ruby]

先ほどはご回答していただきありがとうございました。
ご教授していただいたプログラムで私の実現したいことはできたのですが、翌週や前週に進んだり遡ると日付のデータが取得できなくなります。この場合、どのようにすればいいか再度教えて頂くことはできないでしょうか？

[x_x]

table 自体を再作成しちゃってますかね？
document.querySelector('#calendar tbody')
これを
document.querySelector('#calendar')
とすればとりあえずは動きます。
関係ないセルを弾く処理は入れていないので、クリックされたのが tbody 内か、さらに cellIndex が1-7の範囲内かを見たほうがいいかもしれません。

[rails_ruby]

document.querySelector('#calendar tbody')にすることによっておそらくtableが再生されていたかなと思われます。（あまり詳しいくは分からないのすが）
document.querySelector('#calendar')にすることによって翌週以降の日付を取得することができました。
ご迷惑おかけして申し訳ございませんでした。

[x_x]

迷惑とは思っていませんが、気になることが一つ。
事前にデータを入れておけと言っていましたが、カレンダーが日付を持ちまわさない面倒な作りになっていて修正が容易ではありません。
仮に年月を取得するようにしてみましたが、「日」がないのが気になるので余裕があればreplace()してみてください。

Answer 2

writeってあります？HTMLELementに？

私のvscodeはヒント出してくれなかったんで、document.querySelector("input").value = "a"なら動きました。

Comments

[rails_ruby]

すいませんでした。writeの記述に関しては他のコードから引っ張ってきたので私の勘違いで消し忘れていました。
document.querySelector("input").value = "a"ではaが出力されるところまで確認できたのですが、今回行いたい事としては、カレンダー内のtdをクリック時にカレンダーのデータを出力させたいのでその部分に関してご教授お願いできませんか？
下記はcodepenで作成したカレンダーのサンプルです。
https://codepen.io/keien-nishikawa/pen/MLyObq

[papinianus]

え？
document.querySelector("input").value = ("今日は" + month + "月"+ day + "日です。");
ということですか？右辺の()はあってもなくてもいいです↓。
document.querySelector("input").value = "今日は" + month + "月"+ day + "日です。";

[rails_ruby]

もしかして私の勘違いかもしれませんが、@papinianusさんの方ではdocument.querySelector("input").value = "a"でtdにクリックするときに日付のデータを取得できたのでしょうか？私の方では、inputにaとしか表示されていない状況です。
ちなみにイメージとしてはカレンダーの2月1日9:00のtdをクリックすると、inputには、2月1日 9:00と表示させたいです。

[papinianus]

codepenにログインできないんで更新できないのですが
最後の行の
document.querySelector("input") = "今日は" + month + "月"+ day + "日です。";
を
document.querySelector("input").value = "今日は" + month + "月"+ day + "日です。";
にしてはどうでしょうか、という意味です。

[rails_ruby]

document.querySelector("input").value = "今日は" + month + "月"+ day + "日です。";について今試してみたのですが、動きませんでした...
一からコードを書いたわけではないので自分でもあまり原因を特定できいないのですがもしかしたら、td内に日付の情報が入っていない可能性ってあるのでしょうか？

[papinianus]

var tds = document.querySelectorAll('td');

Array.from(tds).forEach(td => {
td.addEventListener('click', function(event) {
document.querySelector("input").value = "今日は" + month + "月"+ day + "日です。"
});
});
ちゃんと見てなかったんですが、eventlistenerがついてないんでそりゃ何もおきませんね。その前にでてくるところもでも`d`という変数が何か分かりません。
何か分かりませんっていうか、宣言されてない気がする
最後の行を↑のようにすれば動きそうですが、他の部分でエラーがあれば動かない可能性もあります。

[rails_ruby]

ご教授していただいたコードをコピペしてみたのですが、日付のデータは取得できませんでした。そのためクリックイベントが動作するか確かめるために、document.querySelector("input").value = "c"としたところクリック時にcをinputに表示させることまではできました。
なのでおそらくtd内には日付等のデータが入っていないのかもしれないです。

[papinianus]

tdの値をyearやmonthに入れるコードがないんだと思います。
他に正しい回答ついたんでそっちで。

Answer 3

https://www.sejuku.net/blog/70581

document.querySelector("input").write("今日は" + month + "月"+ day + "日です。");

このquerySelectorの中身をテキストボックスのクラス名('.text')にしても動きませんか？

Comments

[rails_ruby]

動きませんでした...
もしかしたらそもそもtd内に日付のデータが入ってないからかもしれないです。