使用iOSSelect.js实现iOS的select下拉选择日期的联动效果

引入文件：

<link rel="stylesheet" href="/static/css/iosSelect.css">
<script type="text/javascript" src="/static/js/iosSelect.js"></script>

HTML部分：

<div class="mui-input-row">
  <input type="text" class="mui-input-clear" placeholder="请选择开始日期" @click="calendshow($event)">
</div>
<div class="mui-input-row">
  <input type="text" class="mui-input-clear" placeholder="请选择结束日期" @click="calendshow($event)">
</div>

写一个循环的时间段，本文是：2019 - 2029

// 时间插件开始
function yearData(one, two, three, callback) {
  var years = [];
  for (var i = 2019, len = 2029; i < len; i++) {
    if (i < 10) {
      i = '0' + i
    }
    years.push({
      id: i,
      value:  i + '年'
    });
  }
  return years;
}

function monthData(one, two, three, callback) {
  var months = [];
  for (var i =1, len = 13; i < len; i++) {
    if (i < 10) {
      i = '0' + i
    }
    months.push({
      id: i,
      value: i + '月'
    });
  }
  return months;
}

function dayData(one, two, three, callback) {
  var days = [];
  for (var i = 1, len = 31; i < len; i++) {
    if (i < 10) {
      i = '0' + i
    }
    days.push({
      id: i,
      value: i + '日'
    });
  }
  return days;
}

function hourData(one, two, three, callback) {
  var hours = [];
  for (var i = 0, len = 24; i < len; i++) {
    if (i < 10) {
      i = '0' + i
    }
    hours.push({
     id: i,
     value: i + '时'
    });
  }
  return hours;
}

function minuteData(one, two, three, four, callback) {
  var minutes = [];
  for (var i = 0, len = 60; i < len; i++) {
    if (i < 10) {
      i = '0' + i
    }
    minutes.push({
      id: i,
      value: i + '分'
    });
  }
  return minutes;
}
// 时间插件开始

调用方法渲染到页面：

function calendshow (event) {
  //console.log(event)
  var el = event.currentTarget;
  var self = this;
  var oneLevelId = this.years;
  var twoLevelId = this.months;
  var threeLevelId = this.days;
  var fourLevelId = this.hours;
  var fiveLevelId = this.minuts;
  var self = this;
  var iosSelect = new IosSelect(5,
    [self.yearData(), self.monthData(), self.dayData(), self.hourData(), self.minuteData()], {
      title: '',
      itemHeight: 35,
      itemShowCount: 6,
      oneLevelId: oneLevelId,
      twoLevelId: twoLevelId,
      threeLevelId: threeLevelId,
      fourLevelId: fourLevelId,
      fiveLevelId: fiveLevelId,
      callback: function (selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj) {
        // console.log(selectOneObj, selectTwoObj, selectThreeObj, selectFourObj, selectFiveObj)
        self.years = (selectOneObj.value).split('年')[0]
        self.months = (selectTwoObj.value).split('月')[0]
        self.days = (selectThreeObj.value).split('日')[0]
        self.hours = (selectFourObj.value).split('时')[0]
        self.minuts = (selectFiveObj.value).split('分')[0];
        //console.log(self.years + '-' + self.months + '-' + self.days + ' ' + self.hours + ':' + self.minuts)
        $(el).val(self.years + '-' + self.months + '-' + self.days + ' ' + self.hours + ':' + self.minuts)
      }
    }
  );
}

 

效果展示