mobile-calendar手机端开发时间插件

##效果展示

##核心步骤
#####第一步：引入相关JS文件和CSS文件（我的首页资源即可下载）

   //相关资源文件在  我首页的资源即可下载
  <script src="lib/mobile-calendar/date.js"></script>
  <script src="lib/mobile-calendar/iscroll.js"></script>
  <link rel="stylesheet" href="css/Appointment/common.css">

#####第二步：在页面上声明一个div，mobile-calendar插件会绑定改插件

  <div id="datePlugin"></div>

#####第三步：引入插件

  $("#hour").date({
            theme:"datetime", //theme取值为"date"或者"datetime"
                              //date只显示时间
            format:"yyyy-mm-dd hh:ii"
  })
  //hour指代绑定该插件的input输入框的id

#####JS文件里通过获取id为"datePlugin"给div添加内容：

    function CreateDateUI() {
      var str = '' +
        '<div id="dateshadow"></div>' +
        '<div id="datePage" class="page">' +
        '<section>' +
        '<div id="datetitle"><h1>请选择日期</h1></div>' +
        '<div id="datemark"><a id="markyear"></a><a id="markmonth"></a><a id="markday"></a></div>' +
        '<div id="timemark"><a id="markhour"></a><a id="markminut"></a><a id="marksecond"></a></div>' +
        '<div id="datescroll">' +
        '<div id="yearwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="monthwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="daywrapper">' +
        '<ul></ul>' +
        '</div>' +
        '</div>' +
        '<div id="datescroll_datetime">' +
        '<div id="Hourwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="Minutewrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="Secondwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '</div>' +
        '</section>' +
        '<footer id="dateFooter">' +
        '<div id="setcancle">' +
        '<ul>' +
        '<li id="dateconfirm">确定</li>' +
        '<li id="datecancle" class="cancelBtn">取消</li>' +
        '</ul>' +
        '</div>' +
        '</footer>' +
        '</div>';
      $("#datePlugin").html(str);
    }

#####JS文件里主要配置参数

$.fn.date.defaultOptions = {
      beginyear: 1900, //日期--年--份开始
      endyear: 2999, //日期--年--份结束
      beginmonth: 1, //日期--月--份结束
      endmonth: 12, //日期--月--份结束
      beginday: 1, //日期--日--份结束
      endday: 31, //日期--日--份结束
      beginhour: 1,
      endhour: 12,
      beginminute: 00,
      endminute: 59,
      curdate: true, //打开日期是否定位到当前日期
      theme: "date", //控件样式（1：日期，2：日期+时间）
      mode: null, //操作模式（滑动模式）
      event: "click", //打开日期插件默认方式为点击后后弹出日期
      show: true,
      fromat: 'yyyy-mm-dd hh:ii'  //yyyy/mm/dd hh:ii
    };

#####相关网址推荐

https://github.com/Hancoson/mobile-calendar