Android版添加phonegap--ionic时间选择插件插件教程

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应用交叉推广，通过插屏、全屏、视频广告等展现形式，为广告主提供高效的优化管理。