Bye Bye Moore

猫マンション建築の野望を胸に零細事業主として資本主義の荒波に漕ぎ出したアラサー男の技術メモ

ionic-datepickerを実装する

Ionicでカレンダー選択式のスゴイUIを提供してくれるionic-datepickerをionic1環境で使うための方法です。
Angular弱者の僕なので非常に苦戦しましたが、ようやく動いたのでメモ。

実際のところ

Salesforce提供の雛形を、たたき台にしたプロジェクトでHogeというページにdatepickerを実装する場合を想定します。
ちゃんと動くと、こんな感じになるはずです(公式より引用)
f:id:shuzo_kino:20170129234512p:plain

導入

プロジェクトのルートで

$ npm install ionic-datepicker --save
$ cp node_modules/ionic-datepicker/dist/ionic-datepicker.bundle.min.js www/js/

www/js/controller.js

どこぞの莫迦のようにfromとtoを現実離れした値にしないようにしてください。
日付選択ができず不毛な原因究明をする羽目になります。

angular.module('starter.controllers', ['forceng', 'ionic-datepicker'])
    // ...
    .controller('HogeCtrl', function ($scope, ionicDatePicker) {
	var ipObj1 = {
	    callback: function (val) {  //Mandatory
		if (typeof(val) === 'undefined') {
		    console.log('No date selected');
		} else {
		    console.log('Return value from the datepicker popup is : ' + val, new Date(val))
		},
	    from: new Date(2011, 1, 1),
	    to: new Date(2099, 12, 31),
	    inputDate: new Date(), 
	    mondayFirst: true,
	    disableWeekdays: [0],
	    closeOnSelect: false,
	    showTodayButton: true,
	    templateType: 'popup'
	};

	$scope.openDatePicker = function(){
	    ionicDatePicker.openDatePicker(ipObj1);
	};
    })
    // ...

www/index.html

メインに先程の手順でぶっ込んだJSを入れます。
ただ、jQueryが必須なので先に。
場所はHEADでもBODYでもお好きな方で。

    <script
        src="https://code.jquery.com/jquery-3.1.1.min.js"
        integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
        crossorigin="anonymous"></script>

    <script src="js/ionic-datepicker.bundle.min.js "></script>

www/template/hoge.html

ボタンで起動させる場合、ng-clickでイベントを発火させてやらんといけません。
functionをよびだすので"()"をつけるのを忘れずに。

//...
    <ion-content>
//...
	<ionic-datepicker input-obj="datepickerObject">
	    <button class="button button-block button-positive" ng-click="openDatePicker()"> {{datepickerObject.inputDate | date:'dd - MMMM - yyyy'}}</button>
	</ionic-datepicker>
    </ion-content>
//...