移动端类似IOS的滚动年月控件（需要jQuery和iScroll）

最新推荐文章于 2022-07-08 18:06:37 发布

weixin_34379433

最新推荐文章于 2022-07-08 18:06:37 发布

阅读量171

点赞数

文章标签： javascript ViewUI

http://www.cnblogs.com/ccblogs/p/5260949.html

一. 效果图

二. 功能介绍

　　支持滚动和点击选择年月。（目前只支持设置年月的最大最小值，不支持整体的最大最小值）

三. 代码

　　1. 在你的html中添加如下代码：

　　　　直接加载<body>里面，这里是插件渲染html的地方。

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

　　2. 在你的html中添加输入框：

　　　　可以是直接的一个输入框，也可以是input-group样式的。

　　　　我这里使用的时input-group，html是由JS加载的。

'<div class="item item-buydate input-group">' +
'<span class="input-group-span no-border-right" id="buydate-span">申购成交时间</span>' +
'<input class="txt-input txt-buydate no-border-left text-right" type="text" placeholder="请选择申购日期" readonly>' +
'</div>';

　　3. 调用方法：

$('.item-buydate').date({ title: '申购成交时间' });

　　4. JS源代码：

(function($) {
  $.fn.date = function(options) {
    var that = $(this);
    var docType = $(this).is('input');
    var nowdate = new Date();
    var indexY = 1,
      indexM = 1;
    var initY = parseInt((nowdate.getYear() + '').substr(1, 2));
    var initM = parseInt(nowdate.getMonth() + '') + 1;
    var yearScroll = null,
      monthScroll = null;
    $.fn.date.defaultOptions = {
      title: '请选择年月',
      beginyear: 2000, //日期--年--份开始
      endyear: nowdate.getFullYear(), //日期--年--份结束
      beginmonth: 1, //日期--月--份结束
      endmonth: 12, //日期--月--份结束
      curdate: false, //打开日期是否定位到当前日期
      mode: null, //操作模式（滑动模式）
      event: "click", //打开日期插件默认方式为点击后后弹出日期
      isShowByDefault: false,
      isSetFinancialDefaultDateValue: false
    }
    var opts = $.extend(true, {}, $.fn.date.defaultOptions, options);
    if (opts.isSetFinancialDefaultDateValue) {
      if (opts.beginyear < opts.endyear) {
        initY = ((opts.endyear - 1) + '').substr(2, 2);
      } else if (opts.beginyear = opts.endyear) {
        initY = (opts.endyear + '').substr(2, 2);
      }
    }
    if (opts.isShowByDefault) {
      showDatePicker()
    }
    that.bind(opts.event, showDatePicker);

    function showDatePicker() {
      createUL();
      init_iScrll();
      extendOptions();
      that.blur();
      refreshDate();
      bindButton();
    }

    function refreshDate() {
      yearScroll.refresh();
      monthScroll.refresh();
      resetInitDete();
      yearScroll.scrollTo(0, initY * 40, 100, true);
      monthScroll.scrollTo(0, initM * 40 - 40, 100, true);
    }

    function resetIndex() {
      indexY = 1;
      indexM = 1;
    }

    function resetInitDete() {
      if (opts.curdate) {
        return false;
      } else if (that.val() === '') {
        if (that.children('input').val() === '') {
          return false;
        }
        initY = parseInt(that.children('input').val().substr(2, 2));
        initM = parseInt(that.children('input').val().substr(5, 2));
      } else {
        initY = parseInt(that.val().substr(2, 2));
        initM = parseInt(that.val().substr(5, 2));
      }
    }

    function bindButton() {
      resetIndex();
      $("#yearwrapper ul li").unbind('click').click(function() {
        if ($(this).hasClass("placeholder")) {
          return false;
        }
        var target = $(this).prev('li');
        yearScroll.scrollToElement(target[0]);
        indexY = $(this).attr('data-params');
        $("#dateconfirm").removeClass("disabled");
      });
      $("#monthwrapper ul li").unbind('click').click(function() {
        if ($(this).hasClass("placeholder")) {
          return false;
        }
        var target = $(this).prev('li');
        monthScroll.scrollToElement(target[0]);
        indexM = $(this).attr('data-params');
        $("#dateconfirm").removeClass("disabled");
      });
      $("#dateshadow").unbind('click').click(function() {
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
      $("#dateconfirm").unbind('click').click(function() {
        if ($(this).hasClass('disabled')) {
          return false;
        }
        if (indexY !== undefined && indexY !== '') {
          indexY = parseInt(parseFloat(indexY).toFixed(0));
        }
        if (indexM !== undefined && indexM !== '') {
          indexM = parseInt(parseFloat(indexM).toFixed(0));
        }
        var datestr = $("#yearwrapper ul li:eq(" + indexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + indexY + ")").html().length - 1) + "-" +
          $("#monthwrapper ul li:eq(" + indexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + indexM + ")").html().length - 1);
        if (docType) {
          that.val(datestr);
          that.trigger('input');
        } else {
          that.children('input').val(datestr);
          that.children('input').trigger('input');
        }
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
      $("#datecancle").click(function() {
        $("#datePage").hide();
        $("#dateshadow").hide();
      });
    }

    function extendOptions() {
      $("#datePage").show();
      $("#dateshadow").show();
    }
    //日期滑动
    function init_iScrll() {
      var oldIndexY = parseInt(indexY.toFixed(0));
      var oldIndexM = parseInt(indexM.toFixed(0));
      var strY = $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().substr(0, $("#yearwrapper ul li:eq(" + oldIndexY + ")").html().length - 1);
      var strM = $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().substr(0, $("#monthwrapper ul li:eq(" + oldIndexM + ")").html().length - 1);
      yearScroll = new iScroll("yearwrapper", {
        snap: "li",
        vScrollbar: false,
        onScrollMove: function() {
          $("#dateconfirm").addClass("disabled");
        },
        onScrollEnd: function() {
          indexY = (this.y / 40) * (-1) + 1;
          $("#dateconfirm").removeClass("disabled");
        }
      });
      monthScroll = new iScroll("monthwrapper", {
        snap: "li",
        vScrollbar: false,
        onScrollMove: function() {
          $("#dateconfirm").addClass("disabled");
        },
        onScrollEnd: function() {
          indexM = (this.y / 40) * (-1) + 1;
          $("#dateconfirm").removeClass("disabled");
        }
      });
    }

    function createUL() {
      CreateDateUI();
      $("#yearwrapper ul").html(createYEAR_UL());
      $("#monthwrapper ul").html(createMONTH_UL());
    }

    function CreateDateUI() {
      var str = '<div id="dateshadow"></div>' +
        '<div id="datePage" class="page">' +
        '<section>' +
        '<div id="datetitle">' + opts.title + '</div>' +
        '<div id="datemark"></div>' +
        '<div id="datescroll">' +
        '<div id="yearwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '<div id="monthwrapper">' +
        '<ul></ul>' +
        '</div>' +
        '</div>' +
        '</section>' +
        '<footer id="dateFooter">' +
        '<div id="setcancle">' +
        '<ul>' +
        '<li id="dateconfirm">确定</li>' +
        '<li id="datecancle">取消</li>' +
        '</ul>' +
        '</div>' +
        '</footer>' +
        '</div>'
      $("#datePlugin").html(str);
    }

    function createYEAR_UL() {
      var str = '<li class="placeholder">&nbsp;</li>';
      for (var i = opts.beginyear; i <= opts.endyear; i++) {
        str += '<li data-params="' + (i - opts.beginyear + 1) + '">' + i + '年</li>';
      }
      return str + '<li class="placeholder">&nbsp;</li>';
    }

    function createMONTH_UL() {
      var str = '<li class="placeholder">&nbsp;</li>';
      for (var i = opts.beginmonth; i <= opts.endmonth; i++) {
        if (i < 10) {
          j = "0" + i;
        } else {
          j = i;
        }
        str += '<li data-params="' + (i - opts.beginmonth + 1) + '">' + j + '月</li>';
      }
      return str + '<li class="placeholder">&nbsp;</li>';
    }
  }
})(jQuery);

　　5. CSS样式：

body,
div,
ul,
li,
h1 {
  padding: 0;
  margin: 0;
  font-family: Microsoft YaHei, Arail, sans-serif;
}

ul,
li {
  list-style: none;
  list-style-type: none;
}

#dateshadow {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.5;
}

#datePage {
  border-radius: 5px;
  position: absolute;
  top: 20%;
  margin: 0 auto;
  vertical-align: middle;
  width: 80%;
  height: 238px;
  background: #FFFFFF;
  z-index: 9999999;
}

#datetitle {
  text-align: center;
  color: #666666;
  padding: 20px 10px 12px;
  line-height: 18px;
  font-size: 18px;
}

#datescroll {
  background: #F8F8F8;
  margin: 10px 18px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  height: 120px;
  text-align: center;
  line-height: 40px;
}

.page {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#datescroll div {
  float: left;
  margin-top: 15px;
}

#yearwrapper {
  position: absolute;
  margin-left: 16%;
  left: 0;
  top: 45px;
  bottom: 60px;
  width: 32%;
}

#monthwrapper {
  position: absolute;
  margin-left: 28%;
  left: 26%;
  top: 45px;
  bottom: 60px;
  width: 32%;
}

#yearwrapper ul li,
#monthwrapper ul li {
  color: #333333;
  font-size: 14px;
}

#setcancle ul {
  text-align: center;
  line-height: 30px;
}

#setcancle ul li {
  border-radius: 3px;
  float: left;
  width: 32%;
  height: 30px;
  list-style-type: none;
  font-size: 14px;
}

#dateconfirm {
  position: absolute;
  background: #8e6dd1;
  right: 12%;
  color: #FFFFFF;
}

#dateconfirm.disabled {
  background: #dbdddd!important;
}

#datecancle {
  position: absolute;
  background: #dbdddd;
  left: 12%;
  color: #FFFFFF;
}

#datemark {
  left: 10%;
  width: 80%;
  height: 30px;
  position: absolute;
  top: 104px;
  background: #eeeeee;
}

#datescroll_datetime {
  display: none;
  background: #F8F8F8;
  width: 94%;
  margin: 10px 3%;
  margin-top: 10px;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  height: 120px;
  text-align: center;
  line-height: 40px;
}

#yearwrapper ul,
#monthwrapper ul {
  width: 100%;
}

#dateFooter {
  width: 100%;
  background: #fff;
  height: 44px;
  bottom: 0px;
  position: absolute;
}