jQuery UI的datepicker没有icon图片，工作需要，自己写了一个，原理是用div包裹住datepicker的input和一个button，隐藏掉input，而button被点击后也可以触发input从而显示datepicker。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/jquery-ui.min.js"></script> <link rel="stylesheet" href="css/jquery-ui.css" /> <style> .dateCon{width:150px; height:30px; display:table-cell; vertical-align:middle; border:1px solid #eee; padding-left:5px;} .dateCon input[type="text"]{width:128px; height:15px; line-height:15px; font-size:15px; border:0; float:left; display:inline-block;} .dateCon input[type="text"]:focus{outline:none;} .dateCon input[type="button"]{width:20px; height:20px; float:right; display:inline-block;} </style> </head> <body> <div class="dateCon"> <input type="text" id="datepicker1" /> <input type="button" id="dateIcon" /> </div> <script> $(document).ready(function(){ $("#datepicker1").datepicker(); $("#dateIcon").click(function(){ $("#datepicker1").trigger("focus"); }); }); </script> </body> </html>