H5新特性--日历插件的使用案例

小白小白从不日白

已于 2022-03-25 15:20:53 修改

阅读量2.8k

点赞数 1

分类专栏： html+css案例文章标签： H5新特性

于 2021-07-18 09:26:45 首次发布

本文链接：https://blog.csdn.net/weixin_43285360/article/details/118872926

版权

html+css案例专栏收录该内容

36 篇文章 7 订阅

订阅专栏

1.引入日历插件的步骤：

引入schedule.css文件，放在页面的起始位置
引入alicdn字体文件，设置左右切换按钮的样式

引入schedule.js文件

2.使用日历插件：

在html页面中设置一个div，作为日历插件的容器

class='boxshaw' 必要属性，如果不写缺失日历的阴影效果

对日历插件进行实例化操作

在脚本中使用 var xxx=new Schedule(JSON);方法对日历插件进行实例化

参数是JSON格式

对schedule的JSON格式参数进行设置

a.el:选中日历插件的承载容器，必要字段，一般放在首位

        var  calendar=new Schedule({

              el:'#id名',

       });

b.clickCb:日历点击回调函数，必要字段，一般习惯放在el地段后面

该回调函数提供三个参数，分别代表日期的年月日

年月的类型是number，日的类型是String

      var  calendar=new Schedule({

              clickCb:function(year,month,day){...}

           });

c.nextMonthCb:切换到下一个月的回调函数，非必要属性

该回调函数提供三个参数，分别代表日期的年月日

年月的类型是number，日的类型是String

        var  calendar=new Schedule({

               nextMonthCb:function(year,month,day){...}

            });

d.nextYearCb

e.prevMonthCb

f.prevYearCb

源码：

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>日历插件</title>
    <link rel="stylesheet" href="schedule/schedule.css" />
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css">
    <style>
        #calendar {
            width: 400px;
            margin: 50px auto;
            padding: 30px;
        }
    </style>
</head>

<body>
    <div class="boxshaw" id="calendar"></div>
    <script src="schedule/schedule.js"></script>
    <script>
        var calendar = new Schedule({
            //el:选中日历插件的承载容器，必要字段，一般放在首位
            el: '#calendar',

            //clickCb:日历点击回调函数，必要字段，一般习惯放在el地段后面
            clickCb: function(year, month, day) {

                console.log(year + "-" + month + "-" + day);
            },

            //nextMonthCb:切换到下一个月的回调函数，非必要属性
            nextMonthCb: function(year, month, day) {
                console.log(year);
                console.log(typeof year);
                console.log(month);
                console.log(typeof month);
                console.log(day);
                console.log(typeof day);
            }
        });
    </script>
</body>

</html>

小白小白从不日白

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
2
评论
H5新特性--日历插件的使用案例

1.引入日历插件的步骤：引入schedule.css文件，放在页面的起始位置引入alicdn字体文件，设置左右切换按钮的样式<linkrel="stylesheet"href="https://at.alicdn.com/t/font_234130_nem7eskcrkpdgqfr.css"> 引入schedule.js文件2.使用日历插件：在html页面中设置一个div，作为日历插件的容器<divclass=...
复制链接

扫一扫