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

Please leave your comments or feedback below!
comments powered by Disqus
Other posts you may like...
Hi! You can search my blog here ⤵
Or browse the recent top tags...

Recent Blog Posts

Mini review of the Sonoff B1 WiFi light bulb

Coherence cache performance optimistic vs replicated schemes

Coherence and weblogic.xml in different types of J2EE web app deployments

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 1 - introduction and case disassembly

jPhotoFrame updated to version 0.3.1 with an image rotation correction utility

iOS 11 pre-GM mini review before it gets revealed next week

Recent Galleries

Atari Lynx repair - Part 5 - McWill LED screen mod installation

Atari Lynx repair - Part 4 - screen cover replacement

Atari Lynx repair - Part 2 - re-capping the motherboard

Atari Lynx repair - Part 3 - broken speaker replacement

Atari Lynx repair - Part 1 - introduction and case disassembly

Building a custom Atari Lynx game box storage shelf unit in a day

Protecting old Atari Lynx game boxes with snug fit plastic sleeves

Monument Valley 2 is released and does not disappoint

Space Food - Chocolate Ice Cream with Chocolate Chips

Legeod Star Wars AT-DP kit

Blogs and Friends

Matt Moores Blog
Georgi's FlatPress Guide
Perplexing Permutations
The Security Sleuth
Ilia Rogatchevski
Travelling Fairy

Blog Activity

Blog Activity