引入文件:
<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) } } ); }
效果展示: