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这款时间选择插件，相信大家已经知道怎么去合理的使用这款插件了