Native date picker in ionic

ionic-v1
1

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')) {
            return
          }

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

        } catch (e) {
          alert(e);
        }
      }

    }
  }]);

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

2

Have you tried using ngCordova datepicker?

it woks for me like that:

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

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.

4

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

5

try running it inside of

$ionicPlatform.ready(function(){})

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

6

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

7

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