Why do we lose cursor upon datepicker selection?

Why do we lose cursor upon datepicker selection?

Objective:
Upon date selection from datepicker, user would tab to next field and the onblur event would trigger an action to populate selected date in the SPAN with ID of "dated".  However, upon date selection, the cursor simply disappears and if I move cursor using mouse to the next field, the SPAN with ID of "dated" is still not populated with datepicker date.  What gives?

Thanks in advance.


<table>
<tr>
<td>
<input type="text" name="exeDate" size="30" class="gdate" onblur="document.getElementById('dated').innerHTML=this.value;">
</td>
<td>
<input type="text" name="field2">
</td>
</tr>
</table>

<span id="dated">##/##/####</span>

... jQuery core file and datepicker file references here...

<script>

// 
(function() {  
        
var d = new Date();
var maxD = new Date(d.setDate(d.getDate())); 
$('.gdate').datepicker({changeMonth: true,changeYear: true,yearRange: "-31:+0",maxDate:maxD,dateFormat: "MM dd, yy"});
})();
</script>