JSでの、日付配列の整形について

Question

JSで、カレンダーを作成しております。
カレンダーの日付を選択すると、その値を取得し、以下のような日付の配列を作成してフォームにセットするスクリプトを組んでいます。

その上で、下記のHTMLフォーマットにマッピングをしたいと考えております。
考えられる限り、チャレンジしたのですが、うまくできない状況です。

どのようにデータを回せばいいのか、ご教授いただけないでしょうか？
よろしくお願いいたします。

■データ（クリック時）
2016/1/2

■データ(フォームにセットする値）
[2016/1/2,2016/2/2,2016/2/9,2016/2/10,2016/2/17,2016/3/10,2016/3/22]

■HTML

<table id="table"> <tbody> <tr> <td><label>1月</label></td> <td><label>2</label></td> <td><label>2月</label></td> <td><label>2,9,10,17</label></td> <td><label>3月</label></td> <td><label>10,22</label></td> </tr> </tbody> </table>

Answer 1

とりあえず、こんな感じで操作できます。日付を入れる操作だけ書きました。
月を入れる場合も、同じように設定すればできます。
どこまで使えるかわかりませんが、テキストを挿入するなど、操作する対象のラベルには、操作・取得しやすいようクラスやカスタムデータ属性をつけることをお勧めします。

挿入前

<table id="table"> 
<tbody> 
<tr> 
<td><label>1月</label></td> 
<!-- 文字を挿入したい箇所には、クラスやカスタムデータ属性をつけてグループ化する -->
<td><label data-calender-date="1"></label></td> 
<td><label>2月</label></td> 
<td><label data-calender-date="2"></label></td> 
<td><label>3月</label></td> 
<td><label data-calender-date="3"></label></td> 
</tr> 
</tbody> 
</table>

var data =  ['2016/1/2','2016/2/2','2016/2/9','2016/2/10','2016/2/17','2016/3/10','2016/3/22'];

/* 日付を抽出した配列を作成 */
var dateArray = [];
$.map(data, function(item, index){
  // 配列内の文字列を「/」で区切り、['2016', '1', '2'] のような配列を作成。
  var itemArray = item.split('/'),
      month = itemArray[1],
      date = itemArray[2],
      pushIndex = month - 1;
  
  /* すでに値が入っていればそれを引き継ぎ、なければ新しい配列を作る。*/
  dateArray[pushIndex] = dateArray[pushIndex] || [];
  dateArray[pushIndex].push(date);
});

/* 各月の日付を（月の数字-1）番目に格納した二重配列ができる。
[["2"], ["2", "9", "10", "17"], ["10", "22"]] */
console.log(dateArray); 

/* data-calender-date属性を持つラベルを取得 */
var $label = $('label[data-calender-date]');

$.map(dateArray, function(item, index){
  var str = item.join(), // ["2", "9", "10", "17"] → '2,9,10,17' に。
      /* 1月の日付は、dateArray[0]に格納されているので、月はindex+1となる。
      計算と同時に下記の抽出で使用するため、数値型から文字列型に変換している。*/
      month = index + 1 + '', 
      /* 挿入先のラベルを抽出。1月なら data-calender-date="1" が設定されているラベルとなる。 */
      $targetLabel = $label.filter(function(){
        return $(this).attr('data-calender-date') === month;
      });

  $targetLabel.text(str);
});

日付挿入後

<table id="table"> 
<tbody> 
<tr> 
<td><label>1月</label></td> 
<!-- 文字を挿入したい箇所には、クラスやカスタムデータ属性をつけてグループ化する -->
<td><label data-calender-date="1">2</label></td> 
<td><label>2月</label></td> 
<td><label data-calender-date="2">2,9,10,17</label></td> 
<td><label>3月</label></td> 
<td><label data-calender-date="3">10,22</label></td> 
</tr> 
</tbody> 
</table>

Answer 2

どのようにデータを扱うかによって最適解は変わってくるかと思いますが、
データを{YEAR: {MONTH: [1,2,3,...], MONTH: [1,2,3,...], ...}}という形式にしてしまうのが何かと扱いやすいのではないかと思いました。

また、データ(フォームにセットする値）ですが、文字列にしておくのが良いかと思います。

// ↓ 中身が計算されてしまう
[2016/1/2,2016/2/2,2016/2/9,2016/2/10,2016/2/17,2016/3/10,2016/3/22]
// = [1008, 504, 112, 100.8, 59.294117647058826, 67.2, 30.545454545454547]

// ↓ 文字列にしておく
["2016/1/2","2016/2/2","2016/2/9","2016/2/10","2016/2/17","2016/3/10","2016/3/22"]

ループさせまくっているのでクールな書き方ではないですが、説明しやすい感じのコードでサンプルを記述しておきます。ご自身のプロジェクトに合うようにリファクタなり考え方の参考なりに

// セットされてる配列
var data = ["2016/1/2","2016/2/2","2016/2/9","2016/2/10","2016/2/17","2016/3/10","2016/3/22"];

// {YEAR: {MONTH: [1, 2, 3, ...]}} という形にデータを整形してformatDataに代入
var formatData = (function(data) {
  var newData = {};
  for(var i=0, l=data.length; i<l; i+=1) {
    var year,
        month,
        day,
        // 2016/1/2 という形式なので / で分割
        date = data[i].split('/');
    if(date.length === 3) {
      year  = date[0];
      month = date[1];
      day   = date[2];
      if(!newData[year]) {
        newData[year] = {};
      }
      if(!newData[year][month]) {
        newData[year][month] = [];
      }
      newData[year][month].push(day);
    }
  }
  return newData;
})(data);

console.log(formatData);

// 整形したデータをぐるぐる回して出力するHTMLを作る
var html = '';
// 年が固定ならこの外側のループ無くせます。
Object.keys(formatData).forEach(function(year) {
  var yearObj = formatData[year];
  html += '<tr data-year="' + year + '">';
  Object.keys(yearObj).forEach(function(month) {
    var days = yearObj[month].join(',');
    html += '<td><label>' + month + '月</label></td>'
          + '<td><label>' + days + '</label></td>';
  });
  html += '</tr>';
});

// jQueryでHTMLに挿入？
$('#table').find('tbody').html( html );