Native date picker in ionic

Hey guys,

I’m trying to get a datepicker to work for ionic using the cordova plugin date-picker

But it is not working. Here is my code

.directive('input', [function () {
    return {
      restrict: 'E',
      scope:    {
        type: '@'
      priority: -1,
      link:     function (scope, elem, attrs) {
        try {
          if (!(scope.type == 'date')) {

          elem[0].addEventListener('focus', function (e) {
            var self = this;
            var date = Date.parse(self.value || new Date());
              date:          date,
              mode:          'date',
              allowOldDates: true
            }, function (returnDate) {
              returnDate = new Date(returnDate);
              self.value = returnDate.toString('dd/MMM/yyyy');

        } catch (e) {


I don’t get any errors at all. What could the issue be?

Have you tried using ngCordova datepicker?

it woks for me like that:

 $scope.setCheckinTime = ->
  options = {date: $scope.vm.requestDetails.checkin || new Date(), mode: 'date'}
  $ (date) -> $scope.vm.requestDetails.checkinTime = date

It doesn’t make sense to have this logic in a controller, it should be in a directive, but I’ve looked at their code and I can’t see what’s any different except that they are using deferred promises.

The difference might be that ionic one is waiting for platform load event?

try running it inside of


And make sure you are testing it on actual device rather than browser or even emulator

the ionicPlatform.ready() did the trick, but I had to put it within the event listener not on the outside.

Hi @richbai90 , I have created both time picker and date picker for ionic frame works.
No additional dependencies like jQuery is not required. Hope this might help you. Please have a look at the below links.

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component