一款比较漂亮的时间日历插件

废话不多说，看图：

目前为止，找到的比较漂亮的一款时间日历插件

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Canlendar</title>
    <style>
        .date{
            background: #fff url("./Canlendar/img/input_date.png") no-repeat right 3px;
            padding-right: 18px;
            font-size: 12px;
        }
        .input-text{
            border:1px solid #ccc;
            height:20px;
            line-height:20px;
            width:126px;
            font-size:12px;
            font-weight:100;
            font-family:微软雅黑,consolas;
            color:#888;
        }
    </style>
    <link rel="stylesheet" href="./Canlendar/jscal2.css" />
    <link rel="stylesheet" href="./Canlendar/border-radius.css" />
    <link rel="stylesheet" href="./Canlendar/win2k.css" />
    <script type='text/javascript' src='./Canlendar/jquery-1.10.2.min.js'></script>
    <script type='text/javascript' src='./Canlendar/calendar.js'></script>
    <script type='text/javascript' src='./Canlendar/lang/en.js'></script>
</head>
<body>
    <h3>一款漂亮的js日历控件</h3>
    <div>
        <input type="text" name="start" id="start" value="" class="date input-text" readonly="">
    </div>
    <script type='text/javascript'>
        Calendar.setup({
            weekNumbers: true,//是否开启周数
            inputField : "start",//input的id值
            trigger    : "start",//input的id值
            dateFormat: " %Y-%m-%d %H:%M:%S",//时间格式：这里为了好看，多了个空格开头
            showTime: true,//是否展示时间
            minuteStep: 1,
            onSelect   : function() {//选择之后的操作函数
                this.hide();//隐藏掉时间日历
            }
        }); 
    </script>
</body>
</html>

 

posted @ 2014-09-01 21:19  Zell~Dincht  阅读(1322)  评论(0)  编辑  收藏  举报