在angular中使用mobiscroll插件实现效果如图:
类似的效果。
代码如下:
html:
<div class="BasicInfo" style="width: 100%;">
<div>请选择会计期间</div>
</div>
<ul class="sPlist" style="position: fixed;top: 42px;left: 0;border-bottom: 10px solid #f0f0f5;">
<li class="listLi clear">
<div style="width: 90%;margin-left:10%;">
<p style="width: 32%;display: inline-block;">
<input style="display: inline-block;width: 60%;text-align: center;" type="text" ng-model="dateYear" mobiscroll-number="Year" placeholder="请选择" />年
</p>
<p style="width: 32%;display: inline-block;">
<input style="display: inline-block;width: 60%;text-align: center;" type="text" ng-model="datemonthstart" mobiscroll-number="monthstart" placeholder="请选择"/>月 到
</p>
<p style="width: 32%;display: inline-block;">
<input style="display: inline-block;width: 60%;text-align: center;" type="text" ng-model="datemonthend" mobiscroll-number="monthend" placeholder="请选择"/>月
</p>
</div>
</li>
</ul>
js:
angular.module('starter.zhangWuChaXunControllers', ['ionic','mobiscroll-number','mobiscroll-scroller'])
//要加上mobiscroll-scroller
.controller('zhangWuChaXunCtrl', function($scope, $rootScope, $state, $http, CONFIG, tool, zhangHuChaXunService) {
//$state路由跳转页面
console.log(zhangHuChaXunService);
var currYear = (new Date()).getFullYear(); //当前年份
$scope.Year = {
theme: 'mobiscroll',
lang: 'zh',
display: 'center',
/*layout: 'fixed',*/
min:2010,
max: currYear+1,
step: 1,
cancelText: '取消',
setText: '确定',
onBeforeClose: function(event, inst) {
if(event.button == "set") {
$scope.start = event.valueText;//获取选择日期
console.log($scope.start)
} else if(event.button == "cancel") {
console.log("取消")
}
}
};
$scope.monthstart = {
theme: 'mobiscroll',
lang: 'zh',
display: 'center',
min:1,
max: 12,
step: 1,
cancelText: '取消',
setText: '确定',
onBeforeClose: function(event, inst) {
if(event.button == "set") {
$scope.start = event.valueText;//获取选择日期
console.log($scope.start)
} else if(event.button == "cancel") {
console.log("取消")
}
}
};
$scope.monthend = {
theme: 'mobiscroll',
lang: 'zh',
display: 'center',
min:1,
max: 12,
step: 1,
cancelText: '取消',
setText: '确定',
onBeforeClose: function(event, inst) {
if(event.button == "set") {
$scope.start = event.valueText;//获取选择日期
console.log($scope.start)
} else if(event.button == "cancel") {
console.log("取消")
}
}
};
})