How to take the date when the button is clicked

Question

I am trying to have a calendar with javascript. You can see it in the picture below:

So as soon as the date is clicked, it should be added to the purple side on the left which I could manage to do. But my question is as you see the date is static and I want it dynamic. So if the user selects 08.08.2021, it should be added to the purple are with an extra div with 08.08.2021.

$(function () {
  function c() {
    p();
    var e = h();
    var r = 0;
    var u = false;
    l.empty();
    while (!u) {
      if (s[r] == e[0].weekday) {
        u = true;
      } else {
        l.append('<div class="blank"></div>');
        r++;
      }
    }
    for (var c = 0; c < 43 - r; c++) {
      if (c >= e.length) {
        l.append('<div class="blank"></div>');
      } else {
        var v = e[c].day;
        var m = g(new Date(t, n - 1, v)) ? '<div class="today" type="button" onclick="addRow()">' : '<div type="button" onclick="addRow()">';
        l.append(m + "" + v + "</div>");
      }
    }
  }
  function h() {
    var e = [];
    for (var r = 1; r < v(t, n) + 1; r++) {
      e.push({ day: r, weekday: s[m(t - 1, n, r)] });
    }
    return e;
  }
  function p() {
    f.empty();
    for (var e = 1; e < 7; e++) {
      f.append("<div>" + s[e].substring(0, 1) + "</div>");
    }
    f.append("<div>" + s[0].substring(0, 1) + "</div>");
  }
  function d() {
    var t;
    var n = $("#calendar").css("width", e + "px");
    n.find((t = "#calendar_weekdays, #calendar_content"))
      .css("width", e + "px")
      .find("div")
      .css({
        width: e / 7 + "px",
        height: e / 7 + "px",
        "line-height": e / 7 + "px",
      });
    n.find("#calendar_header")
      .css({ height: e * (1 / 7) + "px" })
      .find('i[class^="icon-chevron"]')
      .css("line-height", e * (1 / 7) + "px");
  }
  function v(e, t) {
    return new Date(e, t, 0).getDate();
  }
  function m(e, t, n) {
    return new Date(e, t - 1, n).getDay();
  }
  function g(e) {
    return y(new Date()) == y(e);
  }
  function y(e) {
    return e.getFullYear() + "/" + (e.getMonth() + 1) + "/" + e.getDate();
  }
  function b() {
    var e = new Date();
    t = e.getFullYear();
    n = e.getMonth() + 1;
  }
  var e = 640;
  var t = 2013;
  var n = 9;
  var r = [];
  
  var u = $("#calendar");
  var a = u.find("#calendar_header");
  var f = u.find("#calendar_weekdays");
  var l = u.find("#calendar_content");
  b();
  c();
  a.find('i[class^="icon-chevron"]').on("click", function () {
    var e = $(this);
    var r = function (e) {
      n = e == "next" ? n + 1 : n - 1;
      if (n < 1) {
        n = 12;
        t--;
      } else if (n > 12) {
        n = 1;
        t++;
      }
      c();
    };
    if (e.attr("class").indexOf("left") != -1) {
      r("previous");
    } else {
      r("next");
    }
  });
});

function addRow() {
  document.querySelector("#content").insertAdjacentHTML(
    "afterbegin",
    `<tr>
    <td>25.05.2021</td>
    <td>
      <div class="custom-select">
        <select>
          <option value="0">IS</option>
          <option value="1">IS 1</option>
          <option value="2">IS 2</option>
        </select>
      </div>
    </td>
  </tr>`
  );
}

function removeRow(input) {
  input.parentNode.parentNode.parentNode.remove();
}

So, how can I write the selected date into this area: 25.05.2021 ? Thanks for your helps.

Answer 1

This should be easy

 // format your date here, this you could do by your self. eg 01-05-2021
var formatedDate = new Date(t, n - 1, v);
var v = e[c].day;
var m = '<div type="button" class="'+g(new Date(t, n - 1, v)) ? "today": "" +'" onclick="addRow("'+formatedDate+'")"">';
l.append(m + "" + v + "</div>");

// and here you get the formatedDate so you could display it.
function addRow(formatedDate) {
  document.querySelector("#content").insertAdjacentHTML(
    "afterbegin",
    `<tr>
    <td>${formatedDate}</td>
    <td>
      <div class="custom-select">
        <select>
          <option value="0">IS</option>
          <option value="1">IS 1</option>
          <option value="2">IS 2</option>
        </select>
      </div>
    </td>
  </tr>`
  );
}