时间插件(分钟，小时，日) ion-datetime-picker
1 安装插件
npm i ion-datetime-picker --save
2 index.html 引入
```
<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script>
<link href="lib/ion-datetime-picker/release/ion-datetime-picker.min.css" rel="stylesheet">
```
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
```
<ion-list>
<div class="item" ion-datetime-picker ng-model="datetimeValue" ng-change="vm.addRemindTime()" title="'请选择日期和时间'">
{{datetimeValue| date: 'yyyy-MM-dd HH:mm:ss'}}
<input type="text" placeholder="请选择时间" ng-model="vm.inputDate" >
</div>
</ion-list>
```
6 获取
$filter 依赖注入
```
$filter('date')($scope.datetimeValue,'yyyy-MM-dd HH:mm:ss')
```
年月插件用法
ionic-monthpicker
1 安装插件
npm i ionic-monthpicker --save
2 index.html 引入
```
<script src="lib/ionic-monthpicker.min.js"></script>
```
3 app.js中依赖注入
```
angular.module("myApp", ["ionic", "ionic-monthpicker"]);
```
4 使用
```
<div id="yDateTime" class="homeStart " ng-model="datetime.yueStart" ng-click="showMonthDialog(0,$event)">{{datetime.yueStart | date:"yyyy-MM"}}</div>----------------------------月
<div id="yDateTime" class="homeStart" ng-model="datetime.yearStart" ng-click="showMonthDialogYear(0,$event)" >{{datetime.yearStart}}</div>-------------------------年
$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", '<div><style>.month-cell {\n border: 1px solid #ccc;\n text-align: center;\n padding: 10px;\n }\n .month-cell.dark {\n background: #ddd;\n }\n .month-cell.sss {\n background: #0080ff;\n }\n .year {\n font-size:30px;\n }</style><div class="row year"><div class="col col-25" ng-click="changeYear(-1)"><i class="ion ion-chevron-left"></i></div><div class="col col-50 text-center"><strong>{{ selection.year }}</strong></div><div class="col col-25 text-right" ng-click="changeYear(1)"><i class="ion ion-chevron-right"></i></div></div><div ng-repeat="month in monthLabels"><div class="row" ng-if="$index % 3 == 0" style="padding:0"><div class="col col-33 month-cell" ng-class="[{dark: ! isValidMonth($index)},{sss:temps==$index}]" ng-click="selectMonth($index)">{{ monthLabels[$index] }}</div><div class="col col-33 month-cell" ng-class="[{dark: ! isValidMonth($index + 1)},{sss:temps==$index+1}]" ng-click="selectMonth($index + 1)">{{ monthLabels[$index + 1] }}</div><div class="col col-33 month-cell" ng-class="[{dark: ! isValidMonth($index + 2)},{sss:temps==$index+2}]" ng-click="selectMonth($index + 2)">{{ monthLabels[$index + 2] }}</div></div></div></div>') }]); angular.module("ionic-monthpicker").run(["$templateCache", function (n) { n.put("monthpickerYear.html", '<div><style>.month-cell {\nborder: 1px solid #ccc;\n text-align: center;\n padding: 10px;\n }\n .month-cell.dark {\n background: #ddd;\n }\n .year {\n font-size:30px;\n }</style><div class="row year"><div class="col col-25" ng-click="changeYear(-1)"><i class="ion ion-chevron-left"></i></div><div class="col col-50 text-center"><strong>{{ selection.year }}</strong></div><div class="col col-25 text-right" ng-click="changeYear(1)"><i class="ion ion-chevron-right"></i></div></div>') }]);
```
网友评论