How to get MetroUI CSS Datepicker value with javascript

I'd like to be able to see the date selected with a Metro UI CSS datepicker using javascript. Eventually this data would be used for building a JSON object to be sent in an AJAX request. For now though, I'd be happy just to see it in a browser alert message.

Here's the datepicker control: http://metroui.org.ua/datepicker.html Notice the second datepicker has a default value.

How can I use the browser console to get that default value into an alert message? Surely I'm missing something obvious, but I've had no luck doing things like checking "val()" of the input element, etc.

I just found a little workaround (quick and dirty): give a unique Id to the <input type="text"... into the <div class="input-control text"... and then let JQuery to make the magic! Here is the code:

<div id="dpContainer" class="input-control text">
    <input id="inputToRead" type="text">
    <button class="btn-date"></button>
</div>

<script>
    function getDPValue(){
      var selectedDate = $('#inputToRead').val();
      return selectedDate;
    }
</script>

I know it's little bit dirty, probably you can get some useful hint from http://metroui.org.ua/calendar.html functions.

more quick and more dirty:

<script>
  function getDPValue(){
    return $('#dpContainer').children('input[type=text]').val();
  }
</script>

HTH, Stefano.