Angular-DatePicker - pickadate.js port to Angular, no jQuery dependency!

After seeing this thread, I decided to port pickadate.js to Angular. I added directives and removed the jQuery dependency. No translations yet though.

Let me know what you think!



I tried out this demo and its not seems to work properly (at least for me).
I gitted your project and copied angular-datepicker.js + themes folder under my libs.

Also installed with:

var app =  angular.module('ionicApp', ['ionic', 'angular-datepicker']);  

and included:

<script src="lib/js/datepicker/angular-datepicker.js"></script>
<link rel="stylesheet" href="classic.css">
<link rel="stylesheet" href="">
<link rel="stylesheet" href="classic.time.css">

I run under Chrome and don’t see any errors in console.

However Its opened but ther is no functionality:

Link to Plunker

Do I miss something?


Can you try the uncompressed version (found in src in the git repo)? Can you also try without Ionic?

Was there any resolution to this? I tried the datepicker with the classic theme. The datepicker pops up but I cannot select next/prev month or select a date. Also the input defaults to “readonly”.

I made a fork to the plunker above Plunker without ionic with just AngularJS 1.2.18. Seems to work fine…any ideas where the conflicts occur?

1 Like

I played with THIS example (based on angular-bootstrap-datetimepicker).

It works without problems but on S3/S4 i get some lag. Maybe its too hard for mobile aseptically for Androids.

On Nexus 4/5 seems pretty good.

Adding data-tap-disabled=“true” to ion-list and using latest ionic framework version seems to fix it.
I think there’s a better solution though.

See it at

1 Like

Your angular-datepicker.js differs from that one i have! both are version 3.4.0, but yours from the plnkr works!! :smile:

I have same issue. Anybody got solution for it !!

I tried this in a modal , but does not seem to work

I’m having the same issue, to be more descriptive:

After installing the date picker correctly and applying tag:

<input type="text" pick-a-date="date" placeholder="Select Date"   /> {{ date }}
<input type="text" pick-a-time="time" placeholder="Select Time" /> {{ time }}

When tapping/clicking on the input field the Datepicke quickly shows and hides auto medically (Auto selecting a date).

Scenario A:
Looks like you are triggering and Mouse/Click ‘RELEASE’ event which is triggering the Datepicker to select a date and re-close.

Scenario B:
If you click on the input field and quickly move your mouse(So it does not trigger the date), the date picker no longer works.

Hope this helps.

Hi, I have the same issue too. Selecting a date don’t work on desktop BUT it’s works using Ripple plugin (emulate cordova project) and it also work with chrome device emultor so the only difference is the touch emulation. It seem that Click event dont’t trigger select action but touch do.

Hope this helps.

just update the code in directive.js

    element.pickadate(angular.extend(options, {
		onStart : function(){
		onSet: onSet,
		onClose: onClose,
		container: document.body

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

ionic-timepicker demo

ionic-timepicker Bower component

ionic-datepicker demo

ionic-datepicker Bower component

Same with @Bastian - your 3.4.0 works :slight_smile:

I have released a new version v0.7.0 of ionic-datepicker, which has few bug fixes and also few new features. If you wish, you can check here.

I have released a new version of ionic-datepicker i.e. v0.8.0. If anybody wish to use this plug-in, please use this updated version to get the latest features.

I have released a new version of ionic-datepicker i.e. v0.9.0, with a feature and a bug fix. If anybody wish to use this plugin, use the latest version.

How do we disable back date from today