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

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>

H5新特性--日历插件的使用案例相关推荐

html5新特性表单控件,老生常谈h5新特性1:(表单)
老生常谈h5新特性1:(表单) HTML5新特性 -- 十大新特性 (1)新的语义标签和属性 (2)表单新特性 (3)视频和音频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖放A ...
前端面试题二：ES6/7/8新特性、性能优化、数据交互、H5新特性
目录一.ES6/7/8新特性二.性能优化三.数据交互四.H5新特性一.ES6/7/8新特性 1.ES6中新增了哪些数据类型? Symbol类型(基本) Set类型(复杂) Map类型(复杂) ...
H5新特性（一）——音视频标签
H5新特性--音视频标签大家都有在网页中浏览音频和视频的经历,在HTML5之前,对视频和音频没有一个标准,因此在网页中看到的视频,都是通过第三插件的方式嵌入的,可能是QuickTime,也可能是 R ...
oracle中overwrite写法,【学习笔记】Oracle 11G新特性restart的深入研究案例
[学习笔记]Oracle 11G新特性restart的深入研究案例时间:2016-11-26 22:35 来源:Oracle研究中心作者:网络点击: 次天萃荷净 Oracle研究中 ...
前端16天--IFC、BFC、H5新特性、选择器、伪类元素、扩展盒模型、圆角、盒子阴影等--2021/4/21
前端16天–IFC.BFC.H5新特性–2021/4/21 HTML5是HTML标准的最新演进版本: 1.是一个新的HTML语言版本包含了新的元素.属性和行为. 2.同时包含了一系列可以被用来让web ...
【面试】面试官：说一说H5新特性
H5 新特性 1.拖拽释放(Drap and drop) API ondrop拖放是一种常见的特性,即抓取对象以后拖到另一个位置在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放 2.自定义 ...
h5新特性DOMAST的简单理解
h5新特性 1.一些语义化标签 header.footer.nav.aside.article.section.hgroup(h1~h6的集合) document.createElement('hea ...
H5新特性有哪些？怎么理解语义化
H5新增了很多新的特性,这也成了我们面试的时候面试官喜欢问的一个问题,那我们可能在开发的过程中如果没有去关注过那也不是很清楚用到的是不是H5的新特性,下面我们就来讲一下 H5十大新特性 1.语义化标签 ...
H5新特性 - 拖拽属性
拖拽属性拖拽属性 H5的新特性 : 是指鼠标点击源对象之后,不松手将其拖拽到目标对象,或半途松手(释放)的过程拖拽 Drag 源对象: 指定的鼠标点击的一个事物,例如: 一个元素,一个图片等目标 ...

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

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

2.使用日历插件：

H5新特性--日历插件的使用案例相关推荐

最新文章

热门文章