Android版添加phonegap--ionic时间选择插件插件教程
来源:互联网 发布:大宗商品进出口数据 编辑:程序博客网 时间:2024/04/29 10:58
View Demo
这是一个ionic-timepicker bower 组件可用于任何ionic框架的应用
先决条件:
(1)node.js、npm、ionic、bower and gulp。
如何使用:
(1)在项目库安装ionic选择器使用的是bower。
bower install ionic-timepicker--save
(2)在你的index.html文件给ionic-timepicker、bundle.min.js路径。
<!-- path to ionic/angularjs js -->
<script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>
(3)在你的应用程序模板的依赖注入ionic-timepicker,为了与ionic-timepicker的时间选择组件。
angular.module('modulename', ['ionic', 'ionic-timepicker']){
}
(4)在模板的相应控制器中使用下面的格式
$scope.timePickerObject = {
inputEpochTime: ((new Date()).getHours() * 60 * 60), //Optional
step: 15, //Optional
format: 12, //Optional
titleLabel: '12-hour Format', //Optional
setLabel: 'Set', //Optional
closeLabel: 'Close', //Optional
setButtonType: 'button-positive', //Optional
closeButtonType: 'button-stable', //Optional
callback: function (val) { //Mandatory
timePickerCallback(val);
}
};
inputEpochTime (Optional) :$scope.timePickerObject的对象,我们需要需要通过指令,此对象的属性如下:
(a)inputEpochTime (Optional):这个输入时间,时间将最初设定,如果你想在按钮上显示的东西,这是强制性的,打开弹出之前。默认值是当前时间。
(b)step (Optional):这是一分钟的增量/减量步骤。默认值15。
(c)format(Optional):此格式的时间。它可以有两个值就是12或者24。默认值为24。
(d)titleLabel (Optional):对弹出式窗口的标题。默认值是时间选择。
(e)setLabel (Optional):用于设置按钮的标签,设置默认值。
(f)closeLabel (Optional):用于关闭按钮的标签。默认值是关闭的。
(g)setButtonType (Optional):这类型的设置按钮。默认值为按钮positive。你可以提供任何有效的ionic框架的按钮类。
(h)closeButtonType (Optional):这类型的关闭按钮。默认值是按钮stable你可以提供任何有效的ionic框架的按钮类。
(i)callback (Mandatory):这个回调函数,它将在控制器中选择时间,你可以定义此功能如下:
function timePickerCallback(val) {
if (typeof (val) === 'undefined') {
console.log('Time not selected');
} else {
var selectedTime = new Date(val * 1000);
console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');
}
}
(5)当使用在你的模板/的HTML文件格式
<ionic-timepicker input-obj="timePickerObject">
<button class="button button-block button-positive overflowShow">
<standard-time-meridian etime='timePickerObject.inputEpochTime'></standard-time-meridian>
</button>
</ionic-timepicker>
(a)ionic-timepicker 选择的指令,而我们可以通过要求的。
(b)input-obj (Mandatory):这是一个对象,我们必须通过一个对象如上所示。
standard-time-meridian 是我在这里使用的指令,以显示时间以字符串形式而不是epoch价值。您还可以使用我的任何命令将时间转换为字符串格式。
KeyMob是专业的移动广告,移动广告平台,为应用开发者提供优质渠道合作助力Android、IOS应用交叉推广,通过插屏、全屏、视频广告等展现形式,为广告主提供高效的优化管理。
0 0
- Android版添加phonegap--ionic时间选择插件插件教程
- Android版添加phonegap--Crosswalk插件教程
- Android版添加phonegap--imagePicker插件教程
- Android版添加phonegap--ChildBrowser插件教程
- Android版添加phonegap--Camera插件教程
- Ionic时间选择插件
- Android添加phonegap--sencha touch2插件教程
- Android添加phonegap--文件上传插件教程
- Android版添加phonegap-百度地图插件教程
- Android版添加phonegap-百度社会化分享插件教程
- Android版添加phonegap--百度云插件教程
- Android版添加phonegap-银联支付插件教程
- Android版添加phonegap-读取手机短信插件教程
- Android版添加phonegap--百度api定位插件教程
- Android版添加phonegap---横竖屏锁定插件教程
- Android版添加phonegap--美洽客服插件教程
- Android版添加phonegap--InAndroid视频播放功能插件教程
- Android版添加phonegap--员工簿插件教程
- 图像的基本几何变换
- ios des加密与解密(对应JAVA加解密)
- servlet和jms从activemq监听消息
- 解决Spring MVC @ResponseBody返回中文字符串乱码问题
- 关于不同对象且属性名称也不一样的两个对象之间的复制以及动态对象生成
- Android版添加phonegap--ionic时间选择插件插件教程
- AS2.0大步更新 Google强势逆天
- Git SourceTree Please, commit your changes or stash them before you can merge.
- SQL学习 关于汇总函数
- 蔡氏电路混沌同步Multisim实现
- HTML之相对定位relative
- css3制作优惠券
- 利用shuffle和shared memory的reduction性能比较
- ScrollView ViewPager嵌套导致滑动冲突解决方案