The result is a nice looking date input field...
![datepicker1.png datepicker1.png](https://www.igorkromin.net/fp-content/images/programming/jqueryui/datepicker1.png)
Compared to the Date Picker example, my version is lightyears ahead. This is what the example icon trigger looks like...
![datepicker2.png datepicker2.png](https://www.igorkromin.net/fp-content/images/programming/jqueryui/datepicker2.png)
Not very pretty!
So here's the code for my version...
HTML
<form ...>
...
<div class="form-group">
<label for="myDate">Date</label>
<div class="input-group">
<input id="myDate" name="myDate" type="text" class="form-control">
<div class="input-group-addon" style="cursor: pointer;" onclick="$('#myDate').focus();">
<i class="fa fa-calendar"></i>
</div>
</div>
</div>
...
</form>
For JavaScript, I set the format and initialise the input field to today's date.
JavaScript
$("#myDate").datepicker({
dateFormat: "yy-mm-dd"
});
$("#myDate").datepicker().datepicker("setDate", new Date());
With this you can either click on the input field to pop up the date picker input or you can click on the icon to get the same result.
-i