ionic(cordova)でdatepickerを使う

日付入力のUIを当初は「input type="date"」で実装していたのだが、「消去」ボタンを消したかったのだがこれのやりかたがわからず。。素直にDatepicker使うことにした。

プラグインインストール

$ ionic plugin add cordova-plugin-datepicker

テンプレート

<ion-view ng-controller="SampleCtrl">
  <input type="date" readonly ng-click="openDatepicker()" ng-model="date" />
</ion-view>

コントローラ

・・・
.controller("SampleCtrl", function($scope, $timeout) {
  $scope.date = new Date();

  var OK_TEXT = 'OK';
  var CANCEL_TEXT = 'キャンセル';

  $scope.openDatepicker() = function() {
    window.plugins.datePicker.show({
      date : $scope.date,
      mode : 'date',
      // iOS
      doneButtonLabel: OK_TEXT,
      cancelButtonLabel: CANCEL_TEXT,
      // Android
      okText: OK_TEXT,
      cancelText: CANCEL_TEXT,
      // 日本語
      locale: 'ja_jp'
    }, function(date) {
      // $timeoutしないと反映されなかった・・・　
      $timeout(function() {
        $scope.date = new Date(date);
      });
    });
  };
};

「input type="date"」にそのまま入れられて使いやすいとも思った。以上です。