Use built in jQuery UI icon with datepicker
Wednesday, Oct 6, 2010Needed the date picker in a project today and noticed it doesn't integrate well with jQuery UI's icons, if trying to use an icon to open the calendar rather than an input. Found a response on Stackoverflow that talked about having to do it manually. This is the solution I ended up using.
$("#DateFrom")
.datepicker({ showOn: 'button'})
.next('button').text('')
.button({icons:{primary : 'ui-icon-calendar'}});
By default the datepicker button call automatically inserts three ellipses to the button, so the text('') is needed to remove the text from the default button. So there you go a fully theme away calendar button. Now if only they would make this easier by having the datepicker do it all for you.