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!

2 Likes

Hello,

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="classic.date.css">
<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?

Thanks,

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 http://plnkr.co/edit/HmiS9xWUZx2KTAqV1BeN?p=preview

1 Like

@Jamby
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(){
			this.$root.attr('data-tap-disabled',true);
		},
		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