ionic时间月份插件

时间插件(分钟，小时，日) ion-datetime-picker

1 安装插件

npm i ion-datetime-picker  --save

2 index.html 引入

```

```

3 app.js中依赖注入

```

angular.module("myApp", ["ionic", "ion-datetime-picker"]);

```

4 设置（可不做）

$ionicPickerI18n  依赖注入

```

$ionicPickerI18n.weekdays = ["日", "一", "二", "三", "四", "五", "六"];

$ionicPickerI18n.months = ["1月", "2月", "3月", "4月","5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];

$ionicPickerI18n.ok = "确定";

$ionicPickerI18n.cancel = "取消";

$ionicPickerI18n.okClass = "button-positive";

$ionicPickerI18n.cancelClass = "button-stable";

$ionicPickerI18n.arrowButtonClass = "button-positive";

```

5 使用

如果只显示到天的话 在html中添加  date

```

{{datetimeValue| date: 'yyyy-MM-dd HH:mm:ss'}}

```

6 获取

$filter 依赖注入

```

$filter('date')($scope.datetimeValue,'yyyy-MM-dd HH:mm:ss')

```

年月插件用法

ionic-monthpicker

1 安装插件

npm i ionic-monthpicker  --save

2 index.html 引入

```

```

3 app.js中依赖注入

```

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

```

4 使用

```

{{datetime.yueStart | date:"yyyy-MM"}}

----------------------------月

{{datetime.yearStart}}

-------------------------年

$scope.showMonthDialog = function(i) {

        MonthPicker.init({});

        MonthPicker.show(function(res) {

          console.log(i)

            console.log(res);

            if(res.month<=9){

                var month = res.month

                var months = '0'+ month

            }else{

                var months = res.month

            }

            if(i==0){

              $scope.datetime.yueStart = res.year+'-'+months

            }else{

              $scope.datetime.yueEnd = res.year+'-'+months

            }

        });

    }

    $scope.showMonthDialogYear = function(i) {

        MonthPicker.showYear(function(res) {

            if(i==0){

              $scope.datetime.yearStart = res.year

              console.log($scope.datetime.yearStart)

            }else{

              $scope.datetime.yearEnd = res.year

              console.log($scope.datetime.yearEnd)

            }

        });

    }

```

5 ionic-monthpicker.min.js

```

!function () { angular.module("ionic-monthpicker", ["ionic"]) } (), function (n) { n.factory("MonthPicker", ["$rootScope", "$ionicPopup", function (n, e) { var t; return { init: function (e) { t = n.$new(), t.minMonthIndex = e.minMonthIndex || 0, t.minYear = e.minYear || (new Date).getFullYear(), t.maxMonthIndex = void 0 === e.maxMonthIndex ? (new Date).getMonth() : e.maxMonthIndex, t.maxYear = e.maxYear || (new Date).getFullYear(), t.monthLabels = e.monthLabels || ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], t.title = e.title || "请选择", t.cancelText = e.cancelText || "取消", t.cancelClass = e.cancelClass || "button-stable", t.okText = e.okText || "确定", t.okClass = e.okClass || "button-positive", t.selection = { year: e.startingYear || t.maxYear, month: 0 }, t.changeYear = function (n) { t.selection.year += n; t.temps = 13 }, t.temps = (new Date).getMonth(), t.isValidMonth = function (n) { var e = n < t.minMonthIndex && t.selection.year == t.minYear || n > t.maxMonthIndex && t.selection.year == t.maxYear || t.selection.year > t.maxYear; return !e } }, initYear: function (e) { t = n.$new(), t.minYearIndex = e.minYearIndex || 0, t.minYear = e.minYear || (new Date).getFullYear(), t.maxYearIndex = void 0 === e.maxYearIndex ? (new Date).getFullYear() : e.maxYearIndex, t.maxYear = e.maxYear || (new Date).getFullYear(), t.title = e.title || "请选择", t.cancelText = e.cancelText || "取消", t.cancelClass = e.cancelClass || "button-stable", t.okText = e.okText || "确定", t.okClass = e.okClass || "button-positive", t.selection = { year: e.startingYear || t.maxYear }, t.changeYear = function (n) { t.selection.year += n } }, show: function (n) { t.selectMonth = function (n) { if (n == 0) { t.selection = { year: t.selection.year || t.maxYear, month: 0 } } if (n > (new Date).getMonth() || t.selection.year > t.maxYear) { t.isValidMonth(n) } else { t.temps = n } t.temps && t.isValidMonth(n) && (t.selection.month = n) }; var i = e.show({ templateUrl: "monthpicker.html", title: t.title, scope: t, buttons: [{ text: t.cancelText, type: t.cancelClass, onTap: function (e) { n({ year: t.maxYear,month:(new Date).getMonth()+1 }) } }, { text: t.okText, type: t.okClass, onTap: function (e) { n({ year: t.selection.year, month: t.selection.month + 1 }) } }] }) }, showYear: function (n) { var i = e.show({ templateUrl: "monthpickerYear.html", title: t.title, scope: t, buttons: [{ text: t.cancelText, type: t.cancelClass, onTap: function (e) { n({ year: t.maxYear }) } }, { text: t.okText, type: t.okClass, onTap: function (e) { n({ year: t.selection.year }) } }] }) } } }]) } (angular.module("ionic-monthpicker")), angular.module("ionic-monthpicker").run(["$templateCache", function (n) { n.put("monthpicker.html", '

{{ selection.year }}

{{ monthLabels[$index] }}

{{ monthLabels[$index + 1] }}

{{ monthLabels[$index + 2] }}

') }]); angular.module("ionic-monthpicker").run(["$templateCache", function (n) { n.put("monthpickerYear.html", '

{{ selection.year }}

') }]);

```