移动端微网站---选择日期（弹出层）

引言
在做微网站的过程中，日期选择是一个很常见的需求，如果自己纯手写，那是十分麻烦的。
如果能够站在巨人的肩膀上（用前人写的插件），那就方便多了。
但是找一款适用性广，在真实的生产环境测试过的插件，也是很费时的过程。
今天就给大家介绍一款基于zepto.js的日期选择插件[zepto.mdater]。

• 首先预览一下效果

pic1.png

• 项目准备
  首先我们需要准备好下面的几个文件
  1.zepto.js
  2.zepto.mdater.js
  3.zepto.mdater.css

好了，下面通过demo来演示插件如何使用

1.一个文本框

• 页面结构

• 实现效果

pic2.png

2.两个文本框

• 页面结构

• 页面效果

  
  
  

  pic3.png

讲到这里，细心的人会发现上面都是针对文本框的日期选择，我们怎么可以针对一个非input元素呢？

这里不能用原先的js文件实现，我们需要修改一下zepto.mdater的源码
别害怕，只需要改一点点

pic4.png

pic5.png

我在这里规定死了，元素必须包含class----dataText，不然不会被赋值，你可以通过多加一个参数来实现更好的扩展。

• 下面看看页面结构

    
    
    
    
    


    

        选择日期: 
    
    
    
    

• 实现效果

pic6.png

大家可以动手试试(PS:mdater还有一个兄弟mdatetimer，看名字大家就知道了，是精确到时间~~)