Number-Input

<div class="row">
  <div class="col-sm-6">
    <fine-datepicker id='myDatepicker1'>
    </fine-datepicker>
  </div>
  <label class="control-label col-sm-1" for="input">Log:</label>
  <div id="log" class="col-sm-4" 
      style="max-height: 300px; overflow: auto">
  </div>
</div>

<script type="text/javascript">
  var info = {
    element: 'datepicker',
    example: 'events'
  };
  
  var order = 0;
  var logDiv = fine.get('#log');
    
  function log(msg, obj) {
    order += 1;
    logDiv.innerText += order + '. ' + msg + ' ' + obj.toString() + '\n';
    logDiv.scrollTop = logDiv.scrollHeight;
    console.log(msg, obj ? obj : '');
    console.log('');
  }
  
  function onDateSelected(e) {
    log('myDatepicker1 date selected', e.detail.dateObject);
  }
  
  fine.ready(function(e) {
    var el = document.getElementById('myDatepicker1');
    fine.addListener(el, 'date-selected', onDateSelected);
  });
  
</script>