<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<title>ionic時間日期插件</title>
</head>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script src="ionic-datepicker.bundle.min.js"></script>
<script src="ionic-timepicker.bundle.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="openDatePicker()">日期</button>
<button ng-click="openTimePicker()">時間</button>
</div>
</body>
<script>
angular.module('myApp', ['ionic', 'ionic-timepicker', 'ionic-datepicker'])
.config(function (ionicTimePickerProvider, ionicDatePickerProvider) {
var timePickerObj = {
inputTime: (((new Date()).getHours() * 60 * 60) + ((new Date()).getMinutes() * 60)),
format: 12,
step: 15,
setLabel: '選擇',
closeLabel: '關閉'
};
var datePickerObj = {
inputDate: new Date(),
setLabel: '選擇',
todayLabel: '今天',
closeLabel: '關閉',
mondayFirst: false,
weeksList: ["日", "一", "二", "三", "四", "五", "六"],//["S", "M", "T", "W", "T", "F", "S"],
monthsList: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],//["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]
templateType: 'popup',
from: new Date(2018, 1, 1),
to: new Date(2025, 1, 1),
showTodayButton: true,
dateFormat: 'yyyy-MM-dd',
closeOnSelect: false
};
ionicDatePickerProvider.configDatePicker(datePickerObj);
ionicTimePickerProvider.configTimePicker(timePickerObj);
})
.controller("myCtrl", function ($scope,ionicDatePicker,ionicTimePicker) {
var ipObj1 = {
callback: function (val) {
console.log('點擊事件返回值 : ' + val, new Date(val));
},
from: new Date(2018, 1, 1),
to: new Date(2022, 10, 30),
inputDate: new Date(),
mondayFirst: false,
closeOnSelect: false,
templateType: 'popup'
};
$scope.openDatePicker = function(){
ionicDatePicker.openDatePicker(ipObj1);
};
var ipOb2 = {
callback: function (val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('點擊事件返回值 : ', val, 'and the time is ', selectedTime.getUTCHours(), 'H :', selectedTime.getUTCMinutes(), 'M');
}
},
inputTime: 50400,
format: 12,
step: 15,
};
$scope.openTimePicker = function(){
ionicTimePicker.openTimePicker(ipOb2);
};
})
</script>
</html>
項目地址：https://download.csdn.net/download/qq_33040483/10893293