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

来源：互联网发布：打字用什么软件编辑：程序博客网时间：2024/06/07 06: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("取消")            }        }    };})

0 0