Bye Bye Moore

PoCソルジャーな零細事業主が作業メモを残すブログ

ionic-datepickerを実装する

javascript

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>
//...

参考もと