简单实用的日期拾取器，基于jquery实现代码,JS代码库,德仔网

代码语言

代码分类

【JS】简单实用的日期拾取器，基于jquery实现

作者:zhj444 / 发布于2012/11/19/ 636

该日期拾取器很简单，定制性也很好，简单实用

.mini-dpicker{
    text-align:center;
    width:195px;
    padding:5px 2px 2px 2px;
    background:#0fa0FF;
    font-weight:700;
}
.mini-dpicker select{
    margin:0 5px;
}
.mini-dpicker-nextmonth,.mini-dpicker-premonth{
    cursor:pointer;
    color:#d3d7d4;
}
.mini-dpicker-hover{
    background:#426ab3;
}
th,td{
    color:#11264f;
}
td{
    width:24px;
    cursor:pointer;
    text-align:center;
    background:#2a5caa;
}
.mini-dpicker-selected{
    background:#feeeed;
}

<!--demo代码-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
        <title>test</title>
        <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/minipicker-min.js"></script>
        <link href="css/defalut.css" rel="stylesheet"/>
        
    </head>
    <body>
        <input type="text" value="选择日期" id="picker" readonly="true"style="height:40px;width:200px;"/>
        <div id="keepLive" style="margin:200px 0px;"></div>
    </body>
    <script>
        $("#picker").minipicker({
            showOn : "click",   //何时探出拾取器
            hideOn : "click", //何时拾取完成（拾取器消失）
            left : 0,           //拾取器和target左上角新坐标先对位置
            top : 40,           //类比上面
            split : "-",        //日得分隔符
            timeOn : false,      //打开时间拾取
            weekOn:false,        //打开星期拾取
            beginYear : 2010,   //拾取器的最小年份
            endYear : 2015,     //最大年份
            keepLive:false     //是否作为普通日历实用，不具拾取器功能
        });
        $("#keepLive").minipicker({
            keepLive:true
        });
    </script>
</html>

试试其它关键字

　日期拾取器　

同语言下

可能有用的

zhj444贡献的其它代码(2)