用trigger触发datepicker

最新推荐文章于 2022-11-06 08:33:01 发布

aizhanqian5077

最新推荐文章于 2022-11-06 08:33:01 发布

阅读量189

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/zcynine/p/5048700.html

版权

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>