Membuat Date Picker Dengan Style Native Android dengan Ionic

Jika kita menggunakan Ionic untuk membuat sebuah aplikasi mobile, pasti kita dihadapkan kepada kendala style date picker yang belum mendukung Style Native Android. Date Picker Ionic saat ini masih menggunakan style iOS. Sehingga terkadang kurang cocok jika kita gunakan ketika ketika kita membuat aplikasi Android.

Tutorial kali ini akan membahas bagaimana membuat sebuah aplikasi Date Picker android dengan Ionic namun tetap menggunakan style native android pada Date Picker nya. Baik untuk mempersingkat waktu, langsung kita lakukan persiapan seperti biasa:

ionic start datePicker blank
cd datePicker
ionic platform add android

Untuk membuat Date Picker dengan style native, kita telah dimudahkan dengan disediakannya library oleh pihak ketiga. Untuk dapat menggunakan library ini kita perlu melakukan installasi library terlebih dahulu dengan memasukan kode berikut ini di command prompt pada directory aplikasi kita.

bower install ionic-datepicker --save

setelah persiapan awal dan installasi library selesai, langsung kita menhandle keperluan tampilan depan (UI) bisa langsung kita buka file index.html pada directory www/index.html. Silahkan masukkan code berikut ini.

<!DOCTYPE html>
<html>

<head>


 <title></title>

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

 <!-- ionic/angularjs js -->
 <script src="lib/ionic/js/ionic.bundle.js"></script>
 <script src="lib/ionic-datepicker/dist/ionic-datepicker.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-assertive">
   <h1 class="title">Ionic Blank Starter</h1>
  </ion-header-bar>
  <ion-content class="padding" ng-controller="datePickerCtrl">
   <div class="row">
    <div class="col">
     <ionic-datepicker input-obj="datepickerObject">
      <button class="button button-block button-positive">Set Date</button>
     </ionic-datepicker>
    </div>
    <div class="col">
     <button class="button button-block button-balanced" ng-click="currentDate()">Now</button>
    </div>
   </div>
   <hr />
   <center>
    <h4>Date Set</h4>
   </center>
   <center>
    <h3>{{selectedDate | date:'dd - MMMM - yyyy'}}</h3>
   </center>
  </ion-content>
 </ion-pane>
</body>

</html>

Pada angularJS kita juga perlu melakukan settingan-settingan yang sesuai dengan library yang disediakan pihak ketiga. silahkan masukkan code dibawah ini pada file app.js

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

.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('datePickerCtrl', function($scope) {
    $scope.selectedDate = new Date();

    $scope.datepickerObject = {
        titleLabel: 'Title',
        todayLabel: 'Today',
        closeLabel: 'Close',
        setLabel: 'Set',
        setButtonType: 'button-positive',
        todayButtonType: 'button-balanced',
        closeButtonType: 'button-assertive',
        inputDate: new Date(),
        mondayFirst: true,
        disabledDates: disabledDates,
        weekDaysList: weekDaysList,
        monthList: monthList,
        templateType: 'popup',
        showTodayButton: 'true',
        modalHeaderColor: 'bar-positive',
        modalFooterColor: 'bar-positive',
        from: new Date(2012, 8, 2),
        to: new Date(2018, 8, 25),
        callback: function(val) {
            datePickerCallback(val);
        },
        dateFormat: 'dd-MM-yyyy',
        closeOnSelect: false
    };

    var disabledDates = [
        new Date(1437719836326),
        new Date(),
        new Date(2015, 7, 10),
        new Date('Wednesday, August 12, 2015'),
        new Date("08-14-2015"),
        new Date(1439676000000)
    ];

    var weekDaysList = ["Sun", "Mon", "Tue", "Wed", "thu", "Fri", "Sat"];

    var monthList = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

    var datePickerCallback = function(val) {
        if (typeof(val) === 'undefined') {
            console.log('No date selected');
        } else {
            $scope.selectedDate = val;
            console.log('Selected date is : ', val)
        }
    };

    $scope.currentDate = function() {
        $scope.selectedDate = new Date();
    }
})

Setelah semua selesai, kita tinggal menjalankan aplikasi kita. Aplikasi bisa dijalankan baik di browser maupun pada smartphone kita masing-masing. Demikian semoga bermanfaat.