Membuat Time Picker dengan style android di Ionic

Pada artikel-artikel awal telah dijelaskan bahwa Ionic merupakan alat yang sangat bagus untuk membuat aplikasi dalam satu kali coding bisa menghasilkan aplikasi yang bisa dijalankan disemua sistem operasi Smartphone. Namun sedikit kelemahannya ketika kita ingin konsen terhadap satu sistem operasi, katakan saja Android maka terkadang beberapa fitur yang biasanya disediakan oleh Native Java itu agak sulit dibuatnya di Ionic. Atau dalam arti lain, perlu tehnik tersendiri agar aplikasi yang dihasilkan di Ionic bisa mirip dengan aplikasi yang dibuat pada native Java.

Tutorial kali ini akan membahas tentang bagaimana membuat Time Picker, yang secara default Ionic stylenya kurang begitu menarik. Atau bisa dikatakan jauh sekali dari style Android native java. Sehingga user bisa saja sedikit heran kalau style Time Pickernya berbeda dengan biasanya.

Untuk mempersingkat waktu kita lakukan persiapan seperti biasa.

ionic start timePicker blank
cd timePicker
ionic platform add android

Style Time Picker yang akan kita buat menyerupai android native ini, akan kita buat dengan bantuan pihak ketiga yang telah berbaik hati menyediakan library yang bisa kita gunakan untuk membuat Time Picker Android native ini. Untuk memudahkan, dalam CMD silahkan masukkan code dibawah ini untuk melakukkan installasi library yang kita perlukan.

bower install ionic-timepicker --save

Setelah porses installasi library selesai, kita lanjutkan pada proses tampilan depan dari aplikasi yang akan kita buat. Silahkan masukkan code berikut ini pada file index.html

<!DOCTYPE html>
<html>

<head>
 <title></title>

 <link href="lib/ionic/css/ionic.css" rel="stylesheet"></link>
 <link href="css/style.css" rel="stylesheet"></link>

 <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/ionic-timepicker/dist/ionic-timepicker.bundle.min.js"></script>

 <!-- cordova script (this will be a 404 during development) -->
 <script src="cordova.js"></script>

 <!-- your app's js -->
 <script src="js/app.js"></script>
</head>

<body ng-app="starter">

 <ion-pane>
  <ion-header-bar class="bar-energized">
   <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content class="padding" ng-controller="timeCtrl">
   <div class="row">
    <div class="col">
     <ionic-timepicker input-obj="timePickerObject">
      <button class="button button-block button-calm overflowShow">Set Time
                <standard-time-meridian etime="timePickerObject.inputEpochTime"></standard-time-meridian>
              </button>
     </ionic-timepicker>
    </div>
    <div class="col">
     <button class="button button-block button-balanced" ng-click="currentTime()">Now</button>
    </div>
   </div>
   <hr />
   <center>
    <h4>Time Set</h4>
   </center>
   <h3>{{now}}</h3>
   <center>
    <h2><strong>{{("0"+(hour)).slice(-2)}} : {{("0"+(minute)).slice(-2)}} {{meridian}}</strong></h2>
   </center>
  </ion-content>
 </ion-pane>
</body>

</html>

kemudian untuk pengaturan Time Picker kita, masukkan code berikut ini pada app.js yang terletak di directory www/js/app.js

angular.module('starter', ['ionic', 'ionic-timepicker'])

.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
        if (window.cordova & amp; & amp; window.cordova.plugins.Keyboard) {
            cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        }
        if (window.StatusBar) {
            StatusBar.styleDefault();
        }
    });
})

.controller('timeCtrl', function($scope) {
    $scope.hour = new Date().getHours();
    $scope.minute = new Date().getMinutes();
    $scope.meridian = "AM";

    $scope.currentTime = function() {
        $scope.hour = new Date().getHours();
        $scope.minute = new Date().getMinutes();
        $scope.meridian = "AM";
    }

    $scope.timePickerObject = {
        inputEpochTime: ((new Date()).getHours() * 60 * 60),
        step: 1,
        format: 12,
        titleLabel: '12-hour Format',
        setLabel: 'Set',
        closeLabel: 'Close',
        setButtonType: 'button-positive',
        closeButtonType: 'button-assertive',
        callback: function(val) {
            timePickerCallback(val);
        }
    };

    function timePickerCallback(val) {
        if (typeof(val) === 'undefined') {
            console.log('Time not selected');
        } else {
            var selectedTime = new Date(val * 1000);
            if (val & lt; 43200) {
                $scope.meridian = "AM";
            } else $scope.meridian = "PM"
            $scope.hour = selectedTime.getUTCHours();
            $scope.minute = selectedTime.getUTCMinutes();
            console.log('Selected epoch is : ', val, 'and the time is ', selectedTime.getUTCHours(), ':', selectedTime.getUTCMinutes(), 'in UTC');
        }
    }

})

Aplikasi Time Picker kita telah selesai. dan dapat kita running baik di device maupun di browser kita. Demikian, semoga bermanfaat.