date-play

by badfreja

HTML

<h3>Examples for 2 Feb 2019</h3>
<h3>1: the bug</h3>

<div id='m'>Created on client as new Date('2019-02-25') prints as: <p></p></div>
<div id='n'>Stringified date sent to server: <p></p></div>
<div id='p'>new Date([string from server here]): <p></p></div>


<h3>2: new Date('yyyy-mm-dd') + saddlebag</h3>

<div id='x'>Created on client as new Date('2019-02-25') prints as: <p></p></div>
<div id='y'>Stringified date sent to server: <p></p></div>
<div id='z'>saddlebag.parseDateTime([string from server here]): <p></p></div>

<h3>3: new Date(yyyy, m[i], d) + saddlebag</h3>

<div id='a'>Created on client as new Date(2019, 1, 25) prints as: <p></p></div>
<div id='b'>Stringified date sent to server: <p></p></div>
<div id='d'>saddlebag.parseDateTime([string from server here]): <p></p></div>

<h3>4: saddlebag + saddlebag</h3>

<div id='f'>Created on client as saddlebag.parseDateTime('2019-02-25') prints as: <p></p></div>
<div id='g'>Stringified date sent to server: <p></p></div>
<div id='h'>saddlebag.parseDateTime([string from server here]): <p></p></div>

CSS

div, h3, p {
  font-family: sans-serif;
  font-weight: bold;
}

div {
  font-size: 0.80rem;
}

p {
    font-weight: normal;
    font-size: 0.80rem;
}

JavaScript

var saddlebagParseDate = (dateStr) => {
  const parts = dateStr.split('T');
  const datePart = (parts[0] || '').split('-');
  const timePart = (parts[1] || '').split(':');
  return new Date(~~datePart[0], ~~datePart[1] - 1, ~~datePart[2],
    ~~timePart[0], ~~timePart[1], ~~timePart[2], ~~timePart[3]);
}

var render = () => {

// example 1
	document.querySelector('#m p').innerHTML = d2;
  document.querySelector('#n p').innerHTML = str2;
  document.querySelector('#p p').innerHTML = dateFromStr2;
  
// example 2
  document.querySelector('#x p').innerHTML = d3;
  document.querySelector('#y p').innerHTML = str3;
  document.querySelector('#z p').innerHTML = dateFromStr3;

// example 3
	document.querySelector('#a p').innerHTML = d1;
  document.querySelector('#b p').innerHTML = str1;
  document.querySelector('#d p').innerHTML = dateFromStr1;
  
// example 4
  document.querySelector('#f p').innerHTML = d4;
  document.querySelector('#g p').innerHTML = str4;
  document.querySelector('#h p').innerHTML = dateFromStr4;
}

var d1 = new Date(2019, 1, 25);
var str1 = JSON.stringify({date: d1});
var readStr1 = JSON.parse(str1).date;
var dateFromStr1 = saddlebagParseDate(readStr1);


var d2 = new Date('2019-02-25');
var str2 = JSON.stringify({date: d2});
var readStr2 = JSON.parse(str2).date;
var dateFromStr2 = new Date(readStr2);

var d3 = new Date(2019, 1, 25);
var str3 = JSON.stringify({date: d3});
var readStr3 = JSON.parse(str3).date;
var dateFromStr3 = saddlebagParseDate(readStr3);

var d4 = saddlebagParseDate('2019-02-25');
var str4 = JSON.stringify({date: d4});
var readStr4 = JSON.parse(str4).date;
var dateFromStr4 = saddlebagParseDate(readStr4);




render();