<h2>Week, month and datetime-local inputs</h2>

<p>Select a value to see how it appears in JavaScript.</p>

<section>
  <div>
    <label>Week</label>
    <input type="week" onchange="showValue('week', event.target.value)">
    <span id="week"></span>
  </div>

  <div>
    <label>Month</label>
    <input type="month" onchange="showValue('month', event.target.value)"> 
    <span id="month"></span>
  </div>

  <div>
    <label>Datetime local</label>
    <input type="datetime-local" onchange="showValue('datetime-local', event.target.value)">
    <span id="datetime-local"></span>
  </div>
</section>

body {
  font-family: 'Roboto';
  color: #333;
}

section {
  font-size: 1.2em;
}

div {
  margin-bottom: 10px;
  padding: 15px 6px;
  width: 400px;
  background: #f3f3f3;
}

label {
  width: 120px;
  display: inline-block;
  text-align: right;
}

input {
  width: 180px;
  vertical-align: text-top;
}

function showValue(id, value) {
  document.getElementById(id).innerHTML = value;
}