2015-07-18 4 views
0

пытается осуществить ионный DatePicker, по Раджеш это реализация контроллера, после инъекции в зависимостиионной DatePicker

.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); 
     } 
    }; 

это шаблон для визуализации вида,

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

это это ошибка, которую он генерирует

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) 
+0

Можете ли вы показать мне свой HTML-код? – Rajeshwar

ответ

1

попытайтесь использовать это

http://ngcordova.com/docs/plugins/datePicker/

(здесь, чтобы начать с ngCordova: http://ngcordova.com/docs/install/)

Очень простой в использовании

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); 
}); 
3

Вы не делаете правильно, вы следовали шаги, чтобы следовать?

2) Дайте путь к файлу ionic-datepicker.bundle.min.js в файле index.html.

<!-- path to ionic/angularjs --> 
<script src="lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js"></script> 

3) В вашем модуле приложения впрыскивать зависимостей ионно-DatePicker для того, чтобы работать с ионным подборщика времени

angular.module('mainModuleName', ['ionic', 'ionic-datepicker']){ 
// 
} 

4) Используйте форму ниже, в соответствующем контроллере вашего шаблона

$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) Затем используйте форму ниже в вашем файле шаблона/html

<ionic-datepicker input-obj="datepickerObject"> 
    <button class="button button-block button-positive"> {{datepickerObject.inputDate | date:datepickerObject.dateFormat}}</button> 
</ionic-datepicker> 
Смежные вопросы