Use built in jQuery UI icon with datepicker

Needed 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.