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應用交叉推廣，經過插屏、全屏、視頻廣告等展示形式，爲廣告主提供高效的優化管理。