Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

I've been using the jQuery UI Date Picker for a project of mine and decided to combine it with a some Bootstrap form controls, specifically the input field that has a group add-on showing an icon from Font Awesome appended to the control.

The result is a nice looking date input field...
datepicker1.png


Compared to the Date Picker example, my version is lightyears ahead. This is what the example icon trigger looks like...
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

Did you like this post or found it useful? Considering supporting this Blog to keep its web servers running, any amount helps! Thanks!
Have comments or feedback on what I wrote? Please share them below!
comments powered by Disqus
Other posts you may like...