Date in ISO and Milliseconds

by aflynt

HTML

<div class="container">
  <p>Current date and time in ISO format<span id="todayIso"></span></p>
  <p>Equivalent value in milliseconds<span id="todayMilli"></span></p>
  <button onclick="updateToday()">Update</button>
</div>

<div class="container">
  <p>Find the ISO and millisecond values for a custom date</p>
  <p class="note">Note that because the custom date does not take the current timezone into account, subsequent calculations will not include data about the current time.</p>
  <input id="customDate" type="date" />
  <button id="button" onclick="convert()">Find Values</button>
  <div id="allOutput" class="reserved">
    <p>Custom date in ISO format<span id="outputISO"></span></p>
    <p>Equivalent value in milliseconds<span id="outputMilli"></span></p>
  </div>
</div>

CSS

* {
  color: #222;
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
}

button {
  background: #007db8;
  border: none;
  color: white;
  outline: none;
  padding: 6px 12px;
  transition: all 400ms ease-in-out;
}

button:hover {
  background: crimson;
}

input[type="date"] {
  background: #eee;
  border: none;
  margin: 8px 0 24px;
  padding: 4px 6px;
}

input[type="date"]::-webkit-datetime-edit-text {
  margin: 0 2px;
}

p {
  
}

span {
  color: crimson;
  display: block;
  font-size: 0.875em;
  margin: 8px 0 24px;
}

.container {
  background: #fff;
  margin: 20px auto;
  padding: 20px;
  width: 70%;
}

.note {
  color: #666;
  font-size: 0.800em;
}

.reserved {
  min-height: 140px;
  opacity: 0;
  transition: all 500ms ease-in;
}

.reserved.active {
  opacity: 1;
}

JavaScript

function today() {
	var date = new Date();
  document.getElementById('todayIso').innerHTML = date;
  document.getElementById('todayMilli').innerHTML = Date.parse(date);
}

function updateToday() {
  var date = new Date();
  document.getElementById('todayIso').innerHTML = date;
  document.getElementById('todayMilli').innerHTML = Date.parse(date);
}

function convert() {
  var outputISO = document.getElementById('outputISO');
  var outputMilli = document.getElementById('outputMilli');
	var date = document.getElementById('customDate').value;
  if(date == null || date == undefined || date == '') {
  	outputISO.innerHTML = 'You have entered an invalid date.';
    document.getElementById('allOutput').className += ' active';
  } else {
    var iso = new Date(date).toISOString();
    var milliseconds = Date.parse(date);
    outputISO.innerHTML = iso;
    outputMilli.innerHTML = milliseconds;
    document.getElementById('allOutput').className += ' active';
  }
}

today();


// SOURCES

// input type date pseudo elements at
// http://stackoverflow.com/questions/14507119/is-it-possible-to-style-the-default-placeholder-text-on-an-html5-input-type-dat

// to convert a date in yyyy/mm/dd to ISO format
// http://stackoverflow.com/questions/34836752/how-can-i-convert-a-date-like-dd-mm-yyyy-into-iso-date-format-to-store-in-a-mon

// for the use of '+' as shorthand for milliseconds
// http://stackoverflow.com/questions/9229213/convert-iso-date-to-milliseconds-in-javascript

// for documentation on Date.parse()
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse