引言
在做微网站的过程中，日期选择是一个很常见的需求，如果自己纯手写，那是十分麻烦的。
如果能够站在巨人的肩膀上（用前人写的插件），那就方便多了。
但是找一款适用性广，在真实的生产环境测试过的插件，也是很费时的过程。
今天就给大家介绍一款基于zepto.js的日期选择插件[zepto.mdater]。
- 首先预览一下效果
pic1.png
- 项目准备
首先我们需要准备好下面的几个文件
1.zepto.js
2.zepto.mdater.js
3.zepto.mdater.css
好了，下面通过demo来演示插件如何使用
1.一个文本框
- 页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>demo</title>
<link rel="stylesheet" href="zepto-mdater.css">
</head>
<body>
<input type="text" class="js-date" placeholder="选择日期" readonly="readonly">
<script src="zepto.js"></script>
<script src="zepto-mdater-input.js"></script>
<script>
$(function(){
$('.js-date').mdater({
});
});
</script>
</body>
</html>
- 实现效果
pic2.png
2.两个文本框
- 页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>demo2</title>
<link rel="stylesheet" href="zepto-mdater.css">
</head>
<body>
<input type="text" class="js-date-start" placeholder="选择开始日期" readonly="readonly">
<input type="text" class="js-date-end" placeholder="选择结束日期" readonly="readonly">
<script src="zepto.js"></script>
<script src="zepto-mdater-input.js"></script>
<script>
$(function(){
$('.js-date-start,.js-date-end').mdater({
});
});
</script>
</body>
</html>
-
页面效果
pic3.png
讲到这里，细心的人会发现上面都是针对文本框的日期选择，我们怎么可以针对一个非input元素呢？
这里不能用原先的js文件实现，我们需要修改一下zepto.mdater的源码
别害怕，只需要改一点点
pic4.png
pic5.png
我在这里规定死了，元素必须包含class----dataText，不然不会被赋值，你可以通过多加一个参数来实现更好的扩展。
- 下面看看页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
<title>demo2</title>
<link rel="stylesheet" href="zepto-mdater.css">
<style>
.dateText{
display: inline-block;
width: 250px;
height: 25px;
line-height: 25px;
vertical-align: middle;
border: 1px solid #f06;
}
</style>
</head>
<body>
<p class="js-date">
选择日期: <span class="dateText"></span>
</p>
<script src="zepto.js"></script>
<script src="zepto-mdater.js"></script>
<script>
$(function(){
$('.js-date').mdater({
});
});
</script>
</body>
</html>
- 实现效果
pic6.png
网友评论