A 选择时间插件

最新推荐文章于 2024-09-19 13:42:36 发布

静静dove柏拉图

最新推荐文章于 2024-09-19 13:42:36 发布

阅读量507

点赞数

分类专栏： PHP代码积累文章标签： jquery时间

本文链接：https://blog.csdn.net/oBaiLaTu12/article/details/60776598

版权

PHP代码积累专栏收录该内容

16 篇文章 0 订阅

订阅专栏

兼容IE\火狐\chrome



<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>jQuery事件日历插件Calendar</title>
<link rel="stylesheet" href="calendar.css">
<style type="text/css">
html {font: 500 14px 'roboto';color: #333;background-color: #fafafa;}
a {text-decoration: none;}
ul, ol, li {list-style: none;padding: 0;margin: 0;}
#demo {
    width: 300px;
    margin: 150px auto;
}
p { margin: 0;}
#dt {
    margin: 30px auto;
    height: 28px;
    width: 200px;
    padding: 0 6px;
    border: 1px solid #ccc;
    outline: none;
}
</style>
</head>
<body>
<div id="demo"><!--ca是第一个demo,调用插件日历,可以添加记事项目,dd是选择时间调用-->
  <div id="ca"></div>
  <input type="text" id="dt" placeholder="trigger calendar">
  <div id="dd"></div>
</div>
<script src="js/jquery.js"></script> 
<script src="js/calendar.js"></script> 
<script>
    $('#ca').calendar({
        width: 320,
        height: 320,
        data: [                         //这里可以添加记事
            {
              date: '2017/12/24',
              value: 'Christmas Eve'
            },
            {
              date: '2017/12/25',
              value: 'Merry Christmas'
            },
            {
              date: '2017/01/01',
              value: 'Happy New Year'
            }
        ],
        onSelected: function (view, date, data) {
            console.log('view:' + view)
            alert('date:' + date)
            console.log('data:' + (data || 'None'));
        }
    });

    $('#dd').calendar({
        trigger: '#dt',
        zIndex: 999,
        format: 'yyyy-mm-dd',
        onSelected: function (view, date, data) {
            console.log('event: onSelected')
        },
        onClose: function (view, date, data) {
            console.log('event: onClose')
            console.log('view:' + view)
            console.log('date:' + date)
            console.log('data:' + (data || 'None'));
        }
    });
</script>

</body>
</html>