ionic datepicker bower component error - ionic-framework

Question

tryin to implement the ionic datepicker ,by rajesh this is the controller implementation ,after the dependency injection
.controller('PostCtrl', function ($scope, partyStore, $rootScope, $ionicPopup, $location) {
$scope.currentDate = new Date();
$scope.title = "Custom Title";
$scope.datePickerCallback = function (val) {
if (typeof (val) === 'undefined') {
console.log('Date not selected');
} else {
console.log('Selected date is : ', val);
}
};
this is template for rendering the view ,
<ionic-datepicker idate="currentDate" disablepreviousdates="true" disablefuturedates="false" callback="datePickerCallback"
title="title">
<button class="button button-block button-positive">{{ currentDate | date:'dd - MMMM - yyyy' }}</button>
</ionic-datepicker>
this is the error it generates
TypeError: a.callback is not a function
at link.n.on.e.show.buttons.onTap (ionic-datepicker.js:1)
at Scope.IonicModule.factory.extend.$buttonTapped (ionic.bundle.js:45347)
at $parseFunctionCall (ionic.bundle.js:21044)
at ionic.bundle.js:53458
at Scope.$get.Scope.$eval (ionic.bundle.js:23100)
at Scope.$get.Scope.$apply (ionic.bundle.js:23199)
at HTMLButtonElement.<anonymous> (ionic.bundle.js:53457)
at HTMLButtonElement.eventHandler (ionic.bundle.js:11713)
at triggerMouseEvent (ionic.bundle.js:2863)
at tapClick (ionic.bundle.js:2852)

Answer 1

You are not doing properly, have you followed the steps to follow?
2) Give the path of ionic-datepicker.bundle.min.js in your index.html file.
<!-- path to ionic/angularjs -->
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script>
3) In your application module inject the dependency ionic-datepicker, in order to work with the ionic time picker
angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){
//
}
4) Use the below format in your template's corresponding controller
$scope.datepickerObject = {
titleLabel: 'Title', //Optional
todayLabel: 'Today', //Optional
closeLabel: 'Close', //Optional
setLabel: 'Set', //Optional
setButtonType : 'button-assertive', //Optional
todayButtonType : 'button-assertive', //Optional
closeButtonType : 'button-assertive', //Optional
inputDate: new Date(), //Optional
mondayFirst: true, //Optional
templateType: 'popup', //Optional
showTodayButton: 'true', //Optional
modalHeaderColor: 'bar-positive', //Optional
modalFooterColor: 'bar-positive', //Optional
from: new Date(2012, 8, 2), //Optional
to: new Date(2018, 8, 25), //Optional
callback: function (val) { //Mandatory
datePickerCallback(val);
},
dateFormat: 'dd-MM-yyyy', //Optional
closeOnSelect: false, //Optional
};
var datePickerCallback = function (val) {
if (typeof(val) === 'undefined') {
console.log('No date selected');
} else {
console.log('Selected date is : ', val)
}
};
5) Then use the below format in your template / html file
<ionic-datepicker input-obj="datepickerObject">
<button class="button button-block button-positive"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button>
</ionic-datepicker>

Answer 2

try to use this
http://ngcordova.com/docs/plugins/datePicker/
(here to get start with ngCordova : http://ngcordova.com/docs/install/ )
Really easy to use
module.controller('MyCtrl', function($scope, $cordovaDatePicker) {
var options = {
date: new Date(),
mode: 'date', // or 'time'
minDate: new Date() - 10000,
allowOldDates: true,
allowFutureDates: false,
doneButtonLabel: 'DONE',
doneButtonColor: '#F2F3F4',
cancelButtonLabel: 'CANCEL',
cancelButtonColor: '#000000'
};
document.addEventListener("deviceready", function () {
$cordovaDatePicker.show(options).then(function(date){
alert(date);
});
}, false);
});