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

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

You have a few properties to have this. Please check for the from variable to disable the previous dates. Have a look at this link

i have tried like this but not working :
var disabledDates = [
new Date(2016, 2, 23),
];

Use from property as i mentioned in the documentation, and see how to use it. This will disable all the dates till the given date.

Hi All, a new version of ionic-timepicker v0.5.0 has ben releases with new features. If anyone want to use this new version please check this.