mobiscroll自定義年月日選擇的應用

2019-11-09 16:36:12

字體：大中小

來源：轉載

供稿：網友

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

上一篇：操作緩沖池

下一篇：庫與設計模式