←　2018年6月　→
6/1 金
6/2　土
.
.
.
6/30 土

上記のようなものを作りたいのですが、どうすれば自動で日付を取得して表にできるのかわかりません。
そして、矢印を押せば来月の日付が表示されるようにしたいです。

ググり方やこれを使えばいい、などで構いません。
よろしくお願いします。

ruby,rails

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえずjavascriptで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var ym=document.querySelector('#ym');
4  var d=new Date();
5  d.setDate(1);
6  setView(d);
7  function setView(d){
8    var m=d.getMonth()+1;
9    ym.textContent=d.getFullYear()+"年"+(d.getMonth()+1)+"月";
10    var youbi=["日","月","火","水","木","金","土"];
11    document.querySelector('#view').textContent="";
12    while(d.getMonth()+1==m){
13      document.querySelector('#view').innerHTML+=m+"/"+d.getDate()+" "+youbi[d.getDay()]+"<br>";
14      d.setDate(d.getDate()+1);
15    }
16  }
17  document.addEventListener('click',function(e){
18    var t=e.target;
19    if(t.id=="prev"){
20      d.setDate(1);
21      d.setMonth(d.getMonth()-2);
22      setView(d);
23      e.preventDefault();
24    }
25    if(t.id=="next"){
26      d.setDate(1);
27      d.setMonth(d.getMonth());
28      setView(d);
29      e.preventDefault();
30    }
31  });
32});
33</script>
34<a href="#" id="prev">prev</a>
35<span id="ym"></span>
36<a href="#" id="next">next</a>
37<div id="view"></div>

追記

tableにあてはめる？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', function(e){
3  var ym=document.querySelector('#ym');
4  var d=new Date();
5  d.setDate(1);
6  setView(d);
7  function setView(d){
8    var m=d.getMonth()+1;
9    ym.textContent=d.getFullYear()+"年"+(d.getMonth()+1)+"月";
10    var youbi=["日","月","火","水","木","金","土"];
11    document.querySelector('#view').textContent="";
12    var table=document.createElement('table');
13    table.setAttribute("border","1");
14    while(d.getMonth()+1==m){
15      var tr=document.createElement('tr');
16      var td=document.createElement('td');
17      td.append(document.createTextNode(m+"/"+d.getDate()+" "+youbi[d.getDay()]));
18      tr.append(td);
19      table.append(tr);
20      d.setDate(d.getDate()+1);
21    }
22    document.querySelector('#view').append(table);
23  }
24  document.addEventListener('click',function(e){
25    var t=e.target;
26    if(t.id=="prev"){
27      d.setDate(1);
28      d.setMonth(d.getMonth()-2);
29      setView(d);
30      e.preventDefault();
31    }
32    if(t.id=="next"){
33      d.setDate(1);
34      d.setMonth(d.getMonth());
35      setView(d);
36      e.preventDefault();
37    }
38  });
39});
40</script>
41<a href="#" id="prev">prev</a>
42<span id="ym"></span>
43<a href="#" id="next">next</a>
44<div id="view"></div>

日付と曜日を分ける

javascript
1window.addEventListener('DOMContentLoaded', function(e){
2  var ym=document.querySelector('#ym');
3  var d=new Date();
4  d.setDate(1);
5  setView(d);
6  function setView(d){
7    var m=d.getMonth()+1;
8    ym.textContent=d.getFullYear()+"年"+(d.getMonth()+1)+"月";
9    var youbi=["日","月","火","水","木","金","土"];
10    document.querySelector('#view').textContent="";
11    var table=document.createElement('table');
12    table.setAttribute("border","1");
13    while(d.getMonth()+1==m){
14      var tr=document.createElement('tr');
15      var td=document.createElement('td');
16      td.append(document.createTextNode(m+"/"+d.getDate()));
17      tr.append(td);
18      var td=document.createElement('td');
19      td.append(document.createTextNode(youbi[d.getDay()]));
20      tr.append(td);
21      table.append(tr);
22      d.setDate(d.getDate()+1);
23    }
24    document.querySelector('#view').append(table);
25  }
26  document.addEventListener('click',function(e){
27    var t=e.target;
28    if(t.id=="prev"){
29      d.setDate(1);
30      d.setMonth(d.getMonth()-2);
31      setView(d);
32      e.preventDefault();
33    }
34    if(t.id=="next"){
35      d.setDate(1);
36      d.setMonth(d.getMonth());
37      setView(d);
38      e.preventDefault();
39    }
40  });
41});
42