很多項目需要用到日歷控件寺枉,這里就介紹一下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);
};
接著上圖