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

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

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

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

    <label>Datetime local</label>
    <input type="datetime-local" onchange="showValue('datetime-local', event.target.value)">
    <span id="datetime-local"></span>
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;

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto

External JavaScript

  1. https://fonts.googleapis.com/css?family=Roboto