ionic 月份选择控件 ionic-monthpicker

文章参考

https://github.com/petruisfan/ionic-monthpicker

 

我们在日期控件中会碰到“选择日期”,“选择时间”,“选择月份”,尤其是选择日期会比较常见,今天我主要是想介绍一种“选择月份”的ionic控件。

 

1、引入相关的JS文件

<script src="public/js/ionic-monthpicker.min.js"></script>

 

2、在当前模块 中添加“依赖”关系

angular.module("hkApp", ["ionic","ionic-monthpicker"])

 

3、在表单控件中添加“显示弹出选择月份的控件”事件

<input type="text" class="text-center all_width" style="background-color: #fff" ng-click="showMonthDialog($event)" ng-readonly="true" placeholder="选择月份">

 

4、配置控件显示的内容

angular.module("hkApp").controller("incomeDetailReportController", ["$scope", "$state", 'MonthPicker','incomeDetailReportService','APP_CONFIG', function ($scope, $state,MonthPicker,incomeDetailReportService,APP_CONFIG) {

    var monthPickerOptions = {
        minYear : new Date().getFullYear()-1,
        maxYear : new Date().getFullYear(),
        title : '选择月份',
        cancelText : '取消',
        monthLabels : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月']
    };
    MonthPicker.init(monthPickerOptions);

    //弹出选择月份
    $scope.showMonthDialog = function(myevent){
		//res为json对象,有year和month两个key
        MonthPicker.show(function(res) {
            $(myevent.target).val(res.year+"-"+(res.month+1));
        });
    };

}]);

 

 

 

 

  • 大小: 9.5 KB
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值