Code, demos and ideas.

Use built in jQuery UI icon with datepicker

October 06, 2010

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.

[sourcecode language=“js”] $(“#DateFrom”).datepicker({ showOn: ‘button’}).next(‘button’).text(”).button({icons:{primary : ‘ui-icon-calendar’}}); [/sourcecode]

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.

Written by Jason Brown Father, Veteran, lover of everything tech.