1,日期选择器:bower install ionic-datepicker --save
github:点击打开链接
index.htnml引用:<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
2,时间选择器:bower install ionic-timepicker --save,我是怎么下都让用我选版本好像只能下0.4.0的但是不好用没有
ionicTimePickerProvider,所以我直接从github上下载放到lib里面了。
github:点击打开链接
index.htnml引用(对应自己路径):
<script src="lib/ionic-timepicker-master/dist/ionic-timepicker.bundle.min.js"></script>
3,app.js 添加日期:ionic-datepicker,时间:ionic-timepicker
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ionic-datepicker', 'ionic-timepicker'])
4,可以在app.js添加全局日期和时间默认设置
日期:
.config(function (ionicDatePickerProvider) {
var datePickerObj = {
inputDate: new Date(),
titleLabel: '日期选择器',
setLabel: '确认',
todayLabel: '今天',
closeLabel: '关闭',
mondayFirst: false,
weeksList: ["日", "一", "二", "三", "四", "五", "六"],
monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
templateType: 'popup',//popup窗口显示
/* from: new Date(2012, 8, 1),//设置选择起始范围
to: new Date(2018, 8, 1),//设置选择结束范围*/
showTodayButton: true,//是否显示今天按钮
dateFormat: 'yyyy-MM-dd',//当前时间格式
closeOnSelect: false,//是否不显示serLabel即是否不显示确认按键
mondayFirst: true,//星期一作为第一天
disableWeekdays: []//禁用某个星期的所有日(不能选灰色)从0(星期日)开始
};
ionicDatePickerProvider.configDatePicker(datePickerObj);
});
时间:
.config(function (ionicTimePickerProvider) {
var timePickerObj = {
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
format: 24,//小时制度
step: 1,//每次选择多少分钟
setLabel: '确认',
closeLabel: '关闭',
};
ionicTimePickerProvider.configTimePicker(timePickerObj);
ionicDatePickerProvider.configDatePicker(datePickerObj);
});
5,日期和时间选择使用:ipObj1,ipObj2可以重新设置属性
//日期
var ipObj1 = {
callback: function (val) { //Mandatory
var date = $filter('date')(new Date(val), "yyyy-MM-dd");
alert(date);
}
};
ionicDatePicker.openDatePicker(ipObj1);
时间/
var ipObj2 = {
callback: function (val) { //Mandatory
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
}
},
/*inputTime: 50400, //Optional*/
/*format: 12, //Optional*/
/*step: 15, //Optional*/
/*setLabel: 'Set2' //Optional*/
};
ionicTimePicker.openTimePicker(ipObj2);
.controller('DatepickerMy', function ($scope, ionicDatePicker, $filter, ionicTimePicker) {
var ipObj1 = {
callback: function (val) { //Mandatory
var date = $filter('date')(new Date(val), "yyyy-MM-dd");
alert(date);
}
};
ionicDatePicker.openDatePicker(ipObj1);
时间/
var ipObj2 = {
callback: function (val) { //Mandatory
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
}
},
/*inputTime: 50400, //Optional*/
/*format: 12, //Optional*/
/*step: 15, //Optional*/
/*setLabel: 'Set2' //Optional*/
};
ionicTimePicker.openTimePicker(ipObj2);