Field value changes to undefined if no date chosen on datepicker and how to close onblur

Question

I have a text field that opens a datepicker onclick. I would like the datepicker to close onblur, and I am getting 'undefined' in the field after closing the datepicker without choosing a date.

I am using MooTools, so I have not found anything not using jQuery to try. I did try document.getElementById('datepicker').close() and various variations of that, but with no luck.

If I choose a date, everything works fine. I would like the date to remain unchanged if the user doesn't pick another date.

Here's the datepicker:

<td>
   <input style="background-color: transparent; border: none;" type="text"
      data-row-id="0" id="date[0]" name="connectedjob[0][orderDate]" 
      onblur="reformatDate(this.value, this.id)" value="Dec 16, 2015" 
      class="datefield orderDate" size="10">
</td>

Here's the onclick event for the datepicker:

$(document.body).addEvent("click:relay(orderDate)", function (e, el) {
  try {
      e.preventDefault();
      $('orderDate').attr('type') === 'text' ? $('orderDate').attr('type', 'date') : $('orderDate').attr('type', 'text');
   } catch (e) {
      .
      .
   }
});

Here's the code to reformat the date onblur:

 function reformatDate(date, id) {
    var datePick = document.getElementById('orderDate');
    if (date !== '') {
       var month = date.substr(0, 2);
       if (month.includes('0')) {
           month = month.substr(1, 1).toInt();
       }
       var day = date.substr(3, 2);
       if (day.includes('0')) {
           day = day.substr(1, 1).toInt();
       }
       var year = date.substr(6, 4);
       var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
       document.getElementById(id).value = monthNames[month - 1] + ' ' + day + ', ' + year;
       datePick.close();
    } 
  }

Is there a way to do this using JavaScript/MooTools and not jQuery?