ngCordova外掛(5)之DatePicker時間選擇器外掛的使用
今天來說以下幾乎所有專案都會遇到的時間選擇問題，由於企業級APP一般都是銷售，服務，管理一類的APP，所以使用者選擇時間的操作必不可少。本次我以ngcordova的時間選擇外掛DatePicker為例，講一下這個又好用，又全是大坑的時間選擇外掛。
首先外掛的安裝：cordova plugin add cordova-plugin-datepicker
然後說一下常用的可配置內容：
1.mode
時間選擇器的模式
支援平臺：Android/IOS/Windows
值型別：String
值可選項：date(日期)/time(時間)/datetime(只支援IOS和Windows)
2.date
選定的日期
支援平臺：Android/IOS/Windows
值型別：String
預設值：new Date()
3.titleText
支援平臺：Android
時間選擇器的標題
值型別：String或空String
預設值：空String
4.okText
肯定事件的按鈕(一般都為確定)
支援平臺：Android
值型別：String或空String
預設值：空String
5.cancelText
否定事件的按鈕(一般都為取消)
支援平臺：Android
值型別：String或空String
預設值：空String
6.todayText
支援平臺：Android
"當前日期"按鈕顯示的文字，如果為空，則不顯示"當前日期"按鈕
值型別：String或空String
預設值：空String
7.nowText
支援平臺：Android
"現在"按鈕顯示的文字，如果為空，則不顯示"現在"按鈕
值型別：String或空String
預設值：空String
8.is24Hour
支援平臺：Android
以24小時格式顯示時間
值型別：boolean型別
值選項：true/false
預設值：false
9.androidTheme（這個非常非常重要）
支援平臺：Android
選擇時間選擇器的主題
型別：int
值選項：THEME_TRADITIONAL | THEME_HOLO_DARK | THEME_HOLO_LIGHT | THEME_DEVICE_DEFAULT_DARK | THEME_DEVICE_DEFAULT_LIGHT
預設值：THEME_TRADITIONAL
10.doneButtonLabel
"完成"按鈕顯示的文字
支援平臺：IOS
值型別：String
預設值："Done"
11.doneButtonColor
"完成"按鈕的顏色
支援平臺：IOS
值型別：String
預設值："#0000FF"
12.cancelButtonLabel
"取消"按鈕顯示的文字
支援平臺：IOS
值型別：String
預設值："Cancel"
13.cancelButtonColor
" 取消"按鈕的顏色
支援平臺：IOS
值型別：String
預設值："#0000FF"
14.locale（這個非常重要）
選定時間選擇外掛的語言
支援平臺：IOS
型別：字串
預設值："en_us"（英語），中文是(zh_cn)
常用選項說完後，說一下一般的用法，比如要封裝在自己的方法中
$scope.selectDate=function(){
var options={
date: new Date(),//預設選定日期為當天
mode: 'date',//
titleText:'請選擇時間',
okText:'確定',
cancelText:'取消',
doneButtonLabel:'確認',
cancelButtonLabel:'取消'
}
$cordovaDatePicker.show(options).then(function(date){
//這個date就是我們選定好的時間
}
}
那麼現在問題來了，這個date能夠直接用嗎？
答案是不能，因為他返回的是值是這樣的：
比如我們選定了2015年12月30日
然後在程式碼中我們alert(date); //date為外掛返回的值，返回值為標準的時間戳
可見返回的是date型別資料，所以我們要按照一定的格式拿到年月日用date型別的getFullYear()拿到4位數的年份
getMonth()+1拿到月份，(因為getMonth()返回值為1-11 number型別)
getDate()拿到日期
將三者拼接就是年月日
還有就是如果在選項資訊中，沒有說明iOS平臺的外掛語言是什麼，就會以英文為預設
所以我們要在選項內容中
var option={
locale="zh_cn"
}
這樣的話，在iOS上，時間選擇外掛就變為中文了
還有就是我之前強調非常非常重要的
androidTheme這個選項
這個選項的值說是int型別，值列表確是各種字串
THEME_TRADITIONAL | THEME_HOLO_DARK | THEME_HOLO_LIGHT | THEME_DEVICE_DEFAULT_DARK |THEME_DEVICE_DEFAULT_LIGHT
所以大家在這個選項如果這麼用
var option={
androidTheme:"THEME_HOLO_LIGHT"
}
這麼設定是沒有任何效果的，還是預設的樣式
要這麼寫，配置選項才會生效
var option={
androidTheme : window.datePicker.ANDROID_THEMES.THEME_HOLO_LIGHT
}
下面給大家看一下，Android平臺時間選擇器可配置的樣式都有哪些
首先是THEME_TRADITIONAL，這個是android2.3版本的時間選擇器樣式，也是預設樣式
然後是THEME_HOLO_DARK，這個是android4.0版本的時間選擇器樣式，黑色版(Android4.2)
然後是THEME_HOLO_LIGHT，這個是android4.0版本的時間選擇器樣式，白色版(Android4.2)
然後是THEME_DEVICE_DEFAULT_DARK，這個是android5.0版本的時間選擇器樣式，黑色版(Android5.0)
然後是THEME_DEVICE_DEFAULT_LIGHT，這個是android5.0版本時間選擇器樣式，白色版(Android5.0)
說了這麼多關於cordova-plugin-datepicker這款時間選擇外掛，相信大家已經知道怎麼去合理的使用這款外掛了