dates...

by Snj

HTML

<div class="wrapper">
  <div class="container">
    <div class="content">
      <div class="date_inputs">
        <input type="date" id="id_start_date" name="start_date" value="2022-01-01">
        <input type="date" id="id_end_date" name="end_date" value="2022-08-01">
      </div>
      <div class="autorenewal">
        <label>Autorenewal</label>
        <label><input type="radio" onclick="InvoiceDropDownHandler.init()" value=1 checked name="autorenew_choice">Yes</label>
        <label><input type="radio" onclick="InvoiceDropDownHandler.init()" value=0 name="autorenew_choice">No</label>
      </div>
      <label>Period</label>
      <div class="invoice_period">
        <label><input onclick="InvoiceDropDownHandler.init()" type="radio" checked value=1 name="invoice_period">Monthly</label>
        <label><input onclick="InvoiceDropDownHandler.init()" type="radio" value=3 name="invoice_period">Quarterly</label>
        <label><input onclick="InvoiceDropDownHandler.init()" type="radio" value=6 name="invoice_period">Half-yearly</label>
        <label><input onclick="InvoiceDropDownHandler.init()" type="radio" value=12 name="invoice_period">Yearly</label>
      </div>
      <select id="id_invoice_select" name="invoice_select"></select>
    </div>
  </div>
</div>

CSS

@font-face {
	font-family: 'proxima_nova_rgregular';
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot');
	src: url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.woff') format('woff'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.ttf') format('truetype'),
		   url('https://litmus.com/fonts/Emails/proximanova-regular-webfont.svg#proxima_nova_rgregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
*, * ::before, * ::after {
  box-sizing: border-box;
  font-family: proxima_nova_rgregular, sans-serif;
  padding: .3em;
}
body {
  font-size: 23px;
  background-color: rgb(31, 31, 31);
  width: auto;
  height: auto;
}
.date_inputs {
  display: flex;
  justify-content: center;
  column-gap: 1em;
}
.date_inputs > input {
  width: 50%;
}
.invoice_period {
  display: grid;
  margin-top: -1.3em;
  margin-left: 4.4em;
}
label {
  font-size: 15px;
  color: #ffffff54;
}
input, select {
  border: 1px solid #dbdbdb;
  border-radius: 4px;
  font-size: 14px;
}
.container {
  display: flex;
  justify-content: center;
  background-color: #3b3e3c;
  border-radius: 0.3em;
}
.content { display: inline-block; }
.content > label {
  margin-left: 0.5em;
}
select { width: 100%; }

JavaScript

Date.locale = {
  "sv-SE": { month_names: ['Januari', 'Februari', 'March', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'] }
};

Date.prototype.getMonthName = function(lang) {
  lang = lang && (lang in Date.locale) ? lang : 'sv-SE';
  return Date.locale[lang].month_names[this.getMonth()];
};

Date.prototype.getFormated = function(lang) {
	lang = lang && (lang in Date.locale) ? lang : 'sv-SE';
  typeof Date.prototype.formater !== "function"
  	? Date.prototype.formater = new Intl.DateTimeFormat(lang)
    : null;
  return this.formater.format(this);
};

var InvoiceDropDownHandler = {
		lang: "sv-SE", // window.navigator.language
    invoice_select: document.querySelector("#id_invoice_select"),
    get_start_date: document.querySelector("#id_start_date").valueAsDate,
    get_end_date: document.querySelector("#id_end_date").valueAsDate,
    
    get_month_names() { return Date.locale[this.lang].month_names },
    get_invoice_period() { return parseInt(document.querySelector('input[name="invoice_period"]:checked').value) },
    has_autorenewal() { return parseInt(document.querySelector('input[name="autorenew_choice"]:checked').value) === 1 },
    get_period_months(invoice_period) { return this.get_month_names().filter((_, i) =>  i % invoice_period == 0); },

		init (start_date, end_date, invoice_period) {
      start_date = start_date || this.get_start_date;
      end_date = end_date || this.get_end_date;
      invoice_period = invoice_period || this.get_invoice_period()
    	let invoice_months = this.get_period_months(invoice_period);
      
      this.invoice_select.length = 0;
      
      for (var month of invoice_months) {
        var initial_invoice_date = new Date(start_date.valueOf());
        initial_invoice_date.setMonth(initial_invoice_date.getMonth() - 1);
        var value = initial_invoice_date.getFormated();
        var label = `${start_date.getMonthName()} ${start_date.getFullYear().toString()} (Aviseras i...