ionic之時間&日期元件例項
阿新 • • 發佈:2019-01-24
ionic-datepick
introduce
download
bower install ionic-datepicker#0.9.0 --save
load js
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
use
app中注入
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}
controller裡面配置
var disabledDates = [
new Date(1437719836326),
new Date(),
new Date(2015, 7, 10), //months are 0-based, this is August, 10th!
new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
new Date("08-14-2015"), //Short format
new Date(1439676000000) //UNIX format
];
//方便的年月日設定方式,正和我意,可以隨便改了。
var weekDaysList = ["S", "M", "T", "W", "T", "F", "S"];//中文:["日", "一", "二", "三", "四", "五", "六"];
var monthList = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
//中文:["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
// 日期選擇後的回撥函式
var datePickerCallbacke = function (val) {
if (typeof (val) === 'undefined') {
} else {
console.log('Selected date is : ', val);
$scope.scheduleInfo.scheduleDate = val;//更新日期。
}
};
//主體物件
$scope.datepickerObjectEnd = {
titleLabel: '選擇日期', //可選
todayLabel: '今天', //可選
closeLabel: '關閉', //可選
setLabel: '設定', //可選
setButtonType: 'button-assertive', //可選
todayButtonType: 'button-assertive', //可選
closeButtonType: 'button-assertive', //可選
inputDate: new Date(), //可選,輸入值
mondayFirst: true, //可選,星期一開頭
disabledDates: disabledDates, //可選
weekDaysList: weekDaysList, //可選
monthList: monthList, //可選
templateType: 'popup', //可選i.e.的模式 modal or popup(相容模式?)
showTodayButton: 'true', //可選
modalHeaderColor: 'bar-positive', //可選
modalFooterColor: 'bar-positive', //可選
from: new Date(2008, 8, 2), //可選
to: new Date(2030, 8, 25), //可選
callback: function (val) { //Mandatory
datePickerCallbacke(val);
},
dateFormat: 'yyyy-MM-dd', //可選
closeOnSelect: true, //可選,設定選擇日期後是否要關掉介面。呵呵,原本是false。
};
html中使用
<h3>日期:</h3>
<ionic-datepicker input-obj="datepickerObjectEnd">
<!--<button class="button button-block button-positive"> {{datepickerObjectEnd.inputDate |-->
<!--date:datepickerObjectEnd.dateFormat}}-->
<!--</button>-->
{{scheduleInfo.scheduleDate|date:'fullDate'}}
</ionic-datepicker>
效果
ionic-timepick
introduce
download
bower install ionic-timepicker#0.4.0 --save
load js
<!-- path to ionic -->
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
use
app中注入
angular.module('mainModuleName', ['ionic', 'ionic-timepicker']){
//
}
controller配置
$scope.vipTimePickerObject = {
inputEpochTime: ((new Date()).getHours() * 60 * 60), //Optional
step: 15, //Optional
format: 24, //Optional
titleLabel: '24-hour Format', //Optional
setLabel: 'Set', //Optional
closeLabel: 'Close', //Optional
setButtonType: 'button-positive', //Optional
closeButtonType: 'button-stable', //Optional
callback: function (val) { //Mandatory
timePickerCallback(val);
}
};
function timePickerCallback(val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
$scope.vipTimePickerObject.inputEpochTime = val;
$scope.scheduleInfo.scheduleTime = epochParser(val);
console.log('選擇的時間:' + epochParser(val));
}
}
function prependZero(param) {
if (String(param).length < 2) {
return "0" + String(param);
}
return param;
}
function epochParser(val) {
if (val === null) {
return "00:00";
} else {
var hours = parseInt(val / 3600);
var minutes = (val / 60) % 60;
return (prependZero(hours) + ":" + prependZero(minutes));
}
}
html裡面呼叫
<h3>時間:</h3>
<ionic-timepicker input-obj="vipTimePickerObject">
<!--<button class="button button-block button-positive">-->
<!--<!–<standard-time-meridian etime='timePickerObject.inputEpochTime'></standard-time-meridian>–>-->
<!--<standard-time-no-meridian-->
<!--etime='vipTimePickerObject.inputEpochTime'>{{selectedTime}}-->
<!--</standard-time-no-meridian>-->
<!--</button>-->
{{scheduleInfo.scheduleTime}}
</ionic-timepicker>
效果
ion-datetime-picker
introduce
download
bower install ion-datetime-picker --save
load js
<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">
use
app中注入
angular.module("myApp", ["ionic", "ion-datetime-picker"]);
html中呼叫
<ion-list>
<ion-item ion-datetime-picker ng-model="datetimeValue">
{{datetimeValue| date: "yyyy-MM-dd H:mm:ss"}}
</ion-item>
</ion-list>
controller裡面呼叫
$scope.addRemindTime = function () {
console.log("增加提醒時間設定");
$scope.tmp = {};
$scope.tmp.newDate = new Date();
var birthDatePopup = $ionicPopup.show({
//template: '<datetimepicker ng-model="tmp.newDate"></datetimepicker>',
template: '<div ion-datetime-picker="" seconds="" am-pm="" ng-model="tmp.newDate"></div>',
title: "Remind Time",
scope: $scope,
buttons: [
{text: 'Cancel'},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function (e) {
$scope.datetimeValue = $scope.tmp.newDate;
}
}
]
});
}
效果
優化的地方
- 很多配置資訊應該放到app.config中進行配置
- 國際化目前還沒做
- 響應效率還沒測試