很多项目需要用到日历控件，这里就介绍一下ionic-datepicker的集成，还是用bower来集成
bower install ionic-datepicker
接着在index.html里引入
<!-- datepicker -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
别忘了在app.js里加入
angular.module('starter', ['ionic', ......., 'ionic-datepicker'])
最后就是显示了
var datePickerObj = {
callback: function (val) {
$scope.value = $filter('date')(new Date(val),'yyyy-MM-dd');
},
titleLabel: '选择日期',
setLabel: '确定',
todayLabel: '今天',
closeLabel: '关闭',
mondayFirst: false,
weeksList: ["日", "一", "二", "三", "四", "五", "六"],
monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
templateType: 'modal',
from: new Date(2010, 1, 1),
to: new Date(2019, 12, 31),
showTodayButton: false,
dateFormat: 'yyyy-MM-dd',
closeOnSelect: false,
disableWeekdays: []
};
$scope.openDatePicker = function(){
datePickerObj.inputDate = new Date($scope.value);
ionicDatePicker.openDatePicker(datePickerObj);
};
接着上图
屏幕快照 2016-09-30 下午4.38.16.png
