ionic 月份选择控件 ionic-monthpicker

最新推荐文章于 2021-07-09 17:07:57 发布

胖鹅68

最新推荐文章于 2021-07-09 17:07:57 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/hbiao68/article/details/52683411

版权

文章参考

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));
        });
    };

}]);