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

Hope you found this post useful...

...so please read on! I love writing articles that provide beneficial information, tips and examples to my readers. All information on my blog is provided free of charge and I encourage you to share it as you wish. There is a small favour I ask in return however - engage in comments below, provide feedback, and if you see mistakes let me know.

If you want to show additional support and help me pay for web hosting and domain name registration, donations, no matter how small, are always welcome!

Use of any information contained in this blog post/article is subject to this disclaimer.
comments powered by Disqus
Other posts you may like...