Date endec

Encode date to base 36 format and decode it back

by Abhishek Kumar

HTML

<fieldset>
  <legend>Date encoder</legend>
  <label>Actual date</label>
  <input type="date" id="actdate">
  <button type="button" id="encode">Encode</button>
  <br /><br />
  <label>Encoded date</label>
  <code id="enctxt"></code>
</fieldset>
<br />
<fieldset>
  <legend>Date decoder</legend>
  <label>Encoded date</label>
  <input type="text" id="encdate">
  <button type="button" id="decode">Decode</button>
  <br /><br />
  <label>Decoded date</label>
  <code id="dectxt"></code>
</fieldset>

CSS

code {
  display: block;
  margin: 5px 0 0 0;
  padding: 5px 5px;
  background: lightgrey;
  height: 3em;
}

label {
  display: block;
}

JavaScript

$('button#encode').on('click', (e) => {
  let dateStr = $('input#actdate').val();
  dateArr = dateStr.split('-');
  let d = parseInt(dateArr[2]),
    m = parseInt(dateArr[1]),
    y = (parseInt(dateArr[0]) - 2000);
  let input = d + '.' + m + '.' + y;
  let encDate = d.toString(36) + m.toString(36) + y.toString(36);
  let output = dateStr + ' &rarr; ' + input + ' &rarr; ' + encDate;
  $('code#enctxt').html(output);
});

$('button#decode').on('click', (e) => {
  let dateStr = $('input#encdate').val();
  dateArr = dateStr.split('');
  let d = parseInt(dateArr[0], 36),
    m = parseInt(dateArr[1], 36),
    y = parseInt(dateArr[2], 36);
  let input = d + '.' + m + '.' + y;
  let encDate = (2000 + y) + '-' + m + '-' + d;
  let output = dateStr + ' &rarr; ' + input + ' &rarr; ' + encDate;
  $('code#dectxt').html(output);
});