dateStrings

date and time access and formatting workbench

by David McClelland

HTML

<div>
  <input id="input" type="text" />
  <input id="fullYear" type="text" />
  <input id="monthNum" type="text" />
  <input id="monthShort" type="text" />
  <input id="monthFull" type="text" />
  <input id="dayNum" type="text" />
  <input id="dayShort" type="text" />
  <input id="dayFull" type="text" />
  <input id="date" type="text" />
  <br/>
  <label>hours:</label>
  <input id="hours" type="text" />
  <input id="minutes" type="text" />
  <input id="seconds" type="text" />
  <input id="milliseconds" type="text" />
  <input id="ampm" type="text" />
  <br/>
  <label>Formatted Dates:</label>
  <br/>
  <label>separator:</label>
  <input id="separator" value="/" />
  <input id="default" />
  <input id="backward" />
</div>

CSS

#input {
  width: 400px;
}

input {
  width: 45px;
}

#default {
  width: 400px;
}

JavaScript

$(document).ready(function() {
  var dateNow = new Date();
  var dateTime = new Date(dateNow.getTime());
  // object to store date parts
  var dateObj = {};
  // dateDisplay (length of month name)
  var dateDisplay = "numeric";
  var dateOrder = "y-m-d";
  // don't use getYear()!!!
  //var year = dateTime.getYear();
  var fullYear = dateTime.getFullYear();
  monthList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  dayList = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
  var monthNum = dateTime.getMonth() + 1;
  var monthShort = monthList[dateTime.getMonth()].substring(0, 3);
  var monthFull = monthList[dateTime.getMonth()];
  var dayNum = dateTime.getDay() + 1;
  var dayShort = dayList[dateTime.getDay()].substring(0, 3);
  var dayFull = dayList[dateTime.getDay()];
  var date = dateTime.getDate();
  var hours = dateTime.getHours();
  var minutes = dateTime.getMinutes();
  var seconds = dateTime.getSeconds();
  var milliseconds = dateTime.getMilliseconds();
  var ampm = hours < 13 ? "am" : "pm";
  var sep = "/";
  var dateStr = "";
  $("#input").val(dateTime);
  $("#fullYear").val(fullYear);
  $("#monthNum").val(monthNum);
  $("#monthShort").val(monthShort);
  $("#monthFull").val(monthFull);
  $("#dayNum").val(dayNum);
  $("#dayShort").val(dayShort);
  $("#dayFull").val(dayFull);
  $("#date").val(date);
  $("#hours").val(hours);
  $("#minutes").val(minutes);
  $("#seconds").val(seconds);
  $("#milliseconds").val(milliseconds);
  $("#ampm").val(ampm);
  $("#separator").val(sep);
  $("#default").val(formatDate());

  function buildDate() {
    //options
    dateStr = monthShort + sep + date + sep + fullYear;
    return dateStr;
  }

  function reSortDate(obj) {
    // this will send string segments to buildDate to be assembled with separator
    var sortArray = dateOrder.split('-');
    var outArray = [];
    for (var i = 0; i < sortArray.length; i++)...