ngCordova插件(5)之DatePicker时间选择器插件的使用
来源:互联网 发布:温州网络学堂手机版 编辑:程序博客网 时间:2024/04/30 05:13
今天来说以下几乎所有项目都会遇到的时间选择问题,由于企业级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类型的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这款时间选择插件,相信大家已经知道怎么去合理的使用这款插件了
- ngCordova插件(5)之DatePicker时间选择器插件的使用
- ngCordova插件(2)之BarcodeScanner插件的使用
- ngCordova插件(1)之InAppBrowser插件的使用
- ngCordova插件(3)之File插件的使用
- ngCordova插件(4)之Toast提示框插件的使用
- iOS使用ngcordova的插件
- ngCordova插件(0)-ngCordova插件的使用详解_序
- ionic 使用ngcordova插件
- Ionic 开发之旅 一(搭建基本工程)(使用ngCordova插件)(开发自己的ngCordova插件)
- datepicker日期选择器插件
- ionic插件基础(四)——ngCordova配置安装及ngCordova相机插件的使用
- ionic项目之ngcordova插件
- ionic项目之ngcordova插件
- jquery datepicker时间插件
- 时间插件bootstrap-datepicker
- ionic项目之ngcordova插件之camera
- ionic项目之ngcordova插件之camera
- ionic项目之ngcordova插件之camera
- C-数据结构-图-邻接表和邻接矩阵创建和定义
- 封装一个函数afterDate(date,n),得到日期date的n天后的日期 js 日期
- 我的caffe学习之路<第十六天>
- Redis源码解析——字典遍历
- AndroidApp在Android Studio模块化
- ngCordova插件(5)之DatePicker时间选择器插件的使用
- POJ 1905Expanding Rods(计算二分)
- [JZOJ2289] [BZOJ1706]【USACO 2007 NOV GOLD】奶牛接力
- C-数据结构-图-深、广遍历
- react native 和 小米 MIUI
- JS创建对象初步理解(工厂,构造,原型)
- Android中如何判断是否连接网络
- 图片轮播 JavaScript 的代码 事件
- poj 1459 最大流