mobiscroll自定义年月日选择的应用

2019-11-09 17:39:06

字体：大中小

来源：转载

供稿：网友

在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("取消") } } };})

上一篇：模仿微博ViewPage指示器滑动效果的自定义View

下一篇：库与设计模式

学习交流

索泰发布一款GTX 1070 Mini迷你版本:小机

索泰发布一款GTX 1070 Mini迷你版本:小机箱大爱...

热门图片

猜你喜欢的新闻

猜你喜欢的关注