Fake Date Field

Fake date field, so we can full control on how the date is shown, but revert to the REALLY handy built-in date picker in some browsers.

HTML

<input class="dateField" id="dateField" type="date" />
<div id="fakeDateField" class="fakeDateField">
  <em>(initial value)</em>
</div>

CSS

.dateField {
      background-color: white;
      width: 150px;
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      opacity: 0.5;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      opacity: 0;
    }

    .fakeDateField {
      background-color: white;
      width: 130px; /* less, so we don't intercept click on browser chrome for date picker */
      height: 32px;
      border: none;
      position: absolute;
      top: 32px;
      left: 32px;
      display: visible;
      font-size: 12px;
      font-weight: 300;
      font-family: Arial;
      line-height: 32px;
    }

JavaScript

var dateField = document.getElementById("dateField");
    var fakeDateField = document.getElementById("fakeDateField");

      fakeDateField.addEventListener("click", function() {
        console.log("fake date field clicked.");
        document.getElementById("dateField").focus();
      }, false);

      dateField.addEventListener("focus", function() {
        console.log("real date field focused");
        fakeDateField.style.opacity = 0;
        dateField.style.opacity = 1;
      });

      dateField.addEventListener("blur", function() {
        console.log("real date field blurred");
        fakeDateField.style.opacity = 1;
        dateField.style.opacity = 0;
      });

      dateField.addEventListener("change", function() {
        // this would be replaced by momentJS stuff
        if (dateField.value.length < 1) {
          return;
        }

        var date = new Date(dateField.value);
        var day = date.getUTCDate();
        var month = date.getUTCMonth() + 1; //zero-based month values
        fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day;
      });