Perpetual Calendar

An MVP for a perpetual calendar picker.

by Shaun Luttin

HTML

<section>
  <label>Default Rate
    <input type='number' />
  </label>
  <button id="add">
    Add
  </button>
</section>

CSS

select,
input {
  margin: 2px;
}

div {
  border: thin solid gray;
  padding: 5px;
}

JavaScript

const monthNames = ["January", "February", "March", "April", "May", "June",
  "July", "August", "September", "October", "November", "December"
];

var getDaysInMonth = (m) => {
  // use 2024 because it includes Feb 29
  var date = new Date(2024, m, 0);
  return date.getDate();
}

const createSelect = (description) => {

  const label = $('<label/>', {
    text: description
  });

  const select = $('<select>').appendTo(label);

  for (var i = 1; i <= 12; i++) {
    var option = $('<option>', {
      value: i,
      text: monthNames[i - 1]
    });

    select.append(option);
  }

  const input = $('<input>').appendTo(label);

  select.change(() => {
    const selected = $(e.target).find(':selected');
    const monthNumber = selected.val();
    const daysInMonth = getDaysInMonth(monthNumber);
    input.attr('max', daysInMonth);
  });

  return label;
};

$(document).ready(() => {

  $('#add').click((e) => {

    const container = $('section');
    const div = $('<div/>').appendTo(container);

    createSelect('Start').appendTo(div);
    createSelect('End').appendTo(div);

    const rate = $('<label />', {
      text: 'Rate'
    }).appendTo(div);
    $('<input>').appendTo(rate);

  });
});