I have a datepicker control setup using the JQuery UI, I am also using the JQuery UI themes which provide a bunch of default icons that I want to use.
The DatePicker allows for specifying a specific image, i.e.:
<script type="text/javascript"> $(document).ready(function() { $("#DateFrom").datepicker({ showOn: 'button', buttonImageOnly: true, buttonImage: 'images/ui-icon-calendar.png' }); }); </script>
To display an icon from the icon set you use something like:
<span class="ui-icon ui-icon-calendar"></span>
Is there an easy to integrate the two or do I just need to hack out the styles/images manually?
I got it working by doing this
$("#DateFrom").datepicker({ showOn: 'button' }).next('button').button({ icons: { primary: 'ui-icon-calendar' }, text:false });
Just modifies the button that it inserts next to your input for the calendar. By default they throw three ellipses in the text, so I remove that as well.
I suggest putting the image into the input
input.date_picker { text-align: center; background-image: url("images/ui-icon-calendar.png"); background-position: right center; background-repeat: no-repeat; padding-right: 18px; width: 78px; }
Like
I used this icon from the nice tango icons project also available in png
Advantages:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With