restorando/angular-pickadate

A simple and fluid inline datepicker for AngularJS with no extra dependencies.

angular-pickadate's Issues

Demo does not work? Can't click dates

The demo does not seem to work, I cannot select a date. When I click a day, nothing happens...

Prematurely adding ng-invalid and ng-invalid-date

I am using the pickadate directive (v1.0.0) like so:

<input pickadate ng-model="date" format="mm/dd/yyyy" />

Before the form has been submitted, and before the input has even been touched, it has the ng-invalid and ng-invalid-date classes applied.

I am looking for the ability to have angular-pickadate not validate the input at all.

Here is a plunker. This plunker is using version 1.1.0. When you open it before even touching the element, inspect it and you will see the classes are already added on the input.

http://plnkr.co/edit/PlD0eOeXyjIueJb7DHRz?p=preview

angular-pickadate with Ionic Framework

Your have build a very a simple but very operating angular datepicker without other dependencies. Ι combine your datepicker with ionic framework http://ionicframework.com
here is my effort: http://plnkr.co/edit/AbvLyzWOz3iIV8GCqJQ4.

you make Excellent job.

how to format the date in UTC not the dd-mm-yy or other string formats ?

$document event listener causes memory leak

Found this when attempting to debug crashes of javascript tests.

This click event added to the $document is never cleaned up. This means any page that renders a angular-pickadate component will leak memory, especially if the application uses ui router that might render many pickadate components.

see https://github.com/restorando/angular-pickadate/blob/master/src/angular-pickadate.js#L82

Should instead be something like this

return function(scope, element, rootNode) {
        var togglePicker = function(toggle) {
          scope.displayPicker = toggle;
          scope.$apply();
        };

        var handleDocumentClick = function(e) function(e) {
          if (isDescendant(rootNode, e.target) || e.target === element[0]) return;
          togglePicker(false);
        }

        element.on('focus', function() {
          scope.modalStyles = computeStyles(element[0]);
          togglePicker(true);
        });

        element.on('keydown', function(e) {
          if (indexOf.call([9, 13, 27], e.keyCode) >= 0) togglePicker(false);
        });

        $document.on('click', handleDocumentClick);

        // Remove click event when element is destroyed.
        element.on('$destroy', function(){
             $document.off('click, handleDocumentClick);
       });

      };

    }])

Multiple attribute works only within single month

Once trying to get dates from multiple months it has two (inappropriate) behaviors :

• Once the selection starts ex.in April and then some May date to be added. The calendar jumps back to April; model array is not changed.
• Once the selection starts in May and user rolls back into April, the model is destroyed/replaced (?) by April input(s).

positon issue when wrapper by some sbsolute element

The big issue is the datepicker doesn't append to the body, so the position is not compatible if it wraps by some absolute element.

Tag a release

Hello,

Can you tag a release so we can checkout a stable version with bower (instead of *) ?
This way, and if you make some critical changes, a "bower install" won't break what has been already develop with an "older version" of this package.

Thanks

Performance issue on older devices (e.g. iPad 3rd generation)

On older devices, rendering of each month takes so long, that you cannot switch quickly through the months. The month name is not updated for each step before user stops clicking prev / next.

Would be great if the month name would be updated independently from the whole calendar.

show 12 or more months

Hi, first off...love your work!!
Is it possible to extend the angular-pickadate to show up 12 months view and not just 1 month with next+prev?

I want to have like a page/view with 12 months with next+prev buttons showing another 12 months or full year. Any help is appreciated.

Thanks,
KC

Default date prevents other dates from being chosen

I added 2 test cases to the 'Default date" describe block:

it("the ngModel value can be set to some time inside the default month", function() {
  $scope.defaultDate = '2014-11-10';
  $scope.date        = '2014-11-01';
  compile();

  expect($scope.date).to.equal('2014-11-01');
});
// pass

it("the ngModel value can be set to some time outside the default month", function() {
  $scope.defaultDate = '2014-11-10';
  $scope.date        = '2014-03-01';
  compile();

  expect($scope.date).to.equal('2014-03-01');
});
// AssertionError: expected undefined to equal '2014-03-01'

The first case passes, the second case fails. Is that the intended behavior?

In our app, we set the default date to next month, but once we did that users were unable to choose dates in this month or 2 months from now. Halp?

Multiple doesn't exceed the

Add demo to README.

Might want to add a demo to the readme http://plnkr.co/edit/8vOtguOh59vp84DPJZCh?p=preview

How to disable weekends?

$scope.holidays= [1, 7, '2016-04-07'];

trigger Callback when user click date

Hello,

I want to call callback function when user click on date.
I have seen ng-click="setDate" in view and set $scope.setDate in controller but it's not working.

Problem using on mobile devices

Hello there!

Your picker is super great and light, I like it a lot!
But I found one problem when trying to use it on mobile devices for example.
First of all I had to override the width of the modal (I need it to be less than 300, let's say 260).
The thing is that you have fixed width for the picker-modal (which is 300), and this is used to determine position of the modal:
https://github.com/restorando/angular-pickadate/blob/master/src/angular-pickadate.js#L49

Is there any chance that you fix this because this rule doesn't work for smaller screens or if you want to costumize the size of the modal, which makes picker modal clipped from the left side?
One of the solution would be to provide size (or width) as parameter and return it as part of the computeStyles and use it instead of fixed 300 value in order to determine position, what do you think?

Expression 'undefined' used with directive 'pickadate' is non-assignable!

This error occurs after upgrading to the latest version (#29).

<div pickadate ng-model="date"></div>

Error: [$compile:nonassign] Expression 'undefined' used with directive 'pickadate' is non-assignable!

"no extra dependencies"

This appears to require jQuery, am I mistaken?

Expose all options through provider

Hi would it make sense to have all options (ex. weekStartsOn, noExtraRows....) exposed so an app can have one centralised place from which they can be set and changed.

How to set options in $http?

Hi,
I want to set the disabledDates by $http, but the response doesn't work.
like this:
$http.get(url).then(function(response) {
$scope.disabledDates = response.disabledDates;
});
thanks for your help.

translation/l10n

hi,
there are prev/next strings in HTML, which actually not translated. Since this could be done using "angular-translate" I guess it is not desired to include dependencies. What would be the preferred way to translate things.

see my pull request:
#14

show certain days as events

How can I show certain days as highlighted

Installation process

• Add information on how to install from Bower on README file.
• Add snippet for JS/CSS files dependency.

Can I read current month?

I want to read actual month, the one is been shown, can I? How? Thanks!

npm package

Thanks for the great work!

Is it possible to publish the package on npmjs?

We'd like to move away from bower and use browerify for importing and bundling our JS application.

Pickadate issues with IPhone 4: Scrolling within overflow-y

I am using pickadate within a modal built almost exactly like bootstraps (fixed overlay w/ overflow-y > modal-content). On IPhone 4 (despite the browser), my modal no longer allows me to scroll when pickadate is present. This seems to be an issue on IPhone 4 related to overflow:hidden.

My temporary work around is setting a height to .pickadate. If I find a "real" cause I'll be sure to post it here.

maxDate and minDate options don't work if a Date Object is passed

license?

can you make this MIT? love the simplicity and would like to fork it

pickadate-active not working

Hi, I noticed the .pickadate-active class is not getting set.

I found a few potential issues:

scope.classesFor = function(date) {
    var extraClasses = indexOf.call(selectedDates, date.date) >= 0 ? 'pickadate-active' : null;
    return date.classNames.concat(extraClasses);
};

That is sending the date.date property into indexOf, but date.date is a string representation of the date. It should send date.dateObj to compare the full date object.

However, even if you fix that it still doesn't work, because there is an offset on the time. If you run this code:

scope.classesFor = function(date) {
    for (var i = 0; i < selectedDates.length; i++) {
        var d1 = selectedDates[i], d2 = date.dateObj;
        console.log('compare %s with %s', d1, d2);
        console.log('compare %d with %d', d1.getTime(), d2.getTime());
    }
    var extraClasses = indexOf.call(selectedDates, date.dateObj) >= 0 ? 'pickadate-active' : null;
    return date.classNames.concat(extraClasses);
};

And you reach the same day that is selected, you end up with this; note the time offset which will always cause the comparison to fail:

 compare Tue Feb 03 2015 00:00:00 GMT-0500 (EST) with Tue Feb 03 2015 03:00:00 GMT-0500 (EST)
(index):28 

compare 1422939600000 with 1422950400000

Set options

Hey,
It would be nice to set the plugin options through a property like options for date format and other usefull options.

Thanks

Specify "container" attribute

Is it possible to specify "container" attribute in angular? i tried, but it seems not to work.

[QUESTION] Is it possible to change days with keyboard arrows?

I want to pick days back and forwards using keydown event, like left and right keys. Is it possible?

select multiple dates

Hello, I would like to ask a question

how to select multiple dates from an array

for example date=['2014-01-01','2014-03-03'];

thanks for your help

External changes to model not reflected in input field

If I have
<input pickadate model="date" ......... />

changes in date by other controller functions (eg $scope.changeDate() ) should appear as the value of the input, but isn't.

<input pickadate model="date" value="{{date}}"......... /> works, but should not be necessary.

Date change does not work if the new month is different than the current

It is not possible to change the date by a model if the new month is different than the current.

example:

$scope.date = '2015-03-12';

<button type="button" ng-click="data='2015-04-12'">click</button>

After click $scope.date will be undefined.

It doesn't respect the input disabled or readonly attributes

When used with an input in a readonly or disabled input, the datepicker popup opens anyway

timezone - selectedDate is one day before from modal date for other timezones

angular-pickadate works for my local time. To check global Times, I have changed my time zone to "America/Denver". Now selected date is taken one day before today's date (passed modal date), so it applies "pickadate-active" class to yesterday.
I tried passing modal date with local timezone and also with UTC timezone. I don't know why dateHelper.parseDate calls again with stripping Timezone value earlier passed, now my understanding is $locale is converting stripped date assuming it a UTC date to local date. Hence, being GMT-06:00, selected date comes to one date before.
HTML DIV - <div pickadate ng-model="vm.date" ng-model-options="{ debounce: 0 }" header="true" select="true" date-highlight-list="vm.dateList" ></div>
Controller set value - vm.date = moment().tz(timeZoneName).format();

can someone suggest a way to handle different timezones with angular-pickadate?? Thanks !

Add possibility to install via bower

changing locale with week-starts-on='1'

hi,

at first: thx for this real cool module!

my app is able to switch the locale on-the-fly: after changing the locale, angular-pickadate reflects the new month & day names immediatly as expected.

now my issue: when i use the parameter week-starts-on="1", the day names change "defferred", that means not until the next manual "month change" with < prev or next >.

martin

Multiple selection

Add examples of multiple section of dates.

bower

please add bower support

Click-able cells

Would be nicer if you could click anywhere in a cell to select it.

Configurable start of the week

This calendar assumes a week starts on sunday. However, this is not an international consensus. In my region (Belgium) a calendarweek starts on a monday.

To change this, you need to make two changes directly in the code:

-              prevDates         = dateUtils.dateRange(-initialDate.getDay(), 0, initialDate),
-              currentMonthDates = dateUtils.dateRange(0, dayCount, initialDate),
+              prevDates         = dateUtils.dateRange(-initialDate.getDay() + 1, 1, initialDate),
+              currentMonthDates = dateUtils.dateRange(1, dayCount - 1, initialDate),

Not to mention: you need to set your $locale accordingly.

A bit tricky.

Is it possible to make this configurable?

"undefined 0NaN" error

Trying to use pt-BR format and I got:

Changes:

$scope.date = dateFilter(new Date(), 'dd/MM/yyyy');
$scope.minDate = '01/01/2000';
$scope.maxDate = '01/01/2099';

Not sure if this is the correct way to use for pt-BR. There's only one example available.

See here.

jump to date

Hi! Is it possible to jump to a specific date by changing the model value? As far as I can see, this is only possible if the date is in the same month as the current date, right?

I changed the following line and removed the currentDate, then its working. But this destroys some logic I guess.

scope.currentDate = scope.currentDate || firstSelectedDate || new Date();

Should "isOutOfRange" also compare the year and not only the month?

date < minDate || date > maxDate || dateFilter(date, 'M') !== dateFilter(scope.currentDate, 'M');

Thx in advance ...

expensiveCheckFn

Not sure whats going exactly wrong here but this is my scenario (using Angular 1.5.3):

1. uploading some images with a form where I also use pickadate
2. after all uploads finished I change the state to the new gallery (using ui.router)
3. opening an thumb-image with ngDialog
4. some event to show next image

First I thought the problem is on my side but I figured out that the problem doesn't occur when I
a) do a hard reload after the state change or
b) remove pickadate from my app

Is there some way to destroy pickadate after the state change? or how to check if my state is clean - the new state has no pickadate directives in it..

angular.js:13424 Error: [$rootScope:inprog] $apply already in progress
http://errors.angularjs.org/1.5.3/$rootScope/inprog?p0=%24apply
    at angular.js:68
    at beginPhase (angular.js:17383)
    at Scope.$apply (angular.js:17123)
    at togglePicker (angular-pickadate.js:70)
    at HTMLDocument.<anonymous> (angular-pickadate.js:84)
    at defaultHandlerWrapper (angular.js:3417)
    at HTMLDocument.eventHandler (angular.js:3405)
    at Scope.scope.openNext (galleryItem.directive.js:32)
    at fn (eval at <anonymous> (angular.js:14268), <anonymous>:4:215)
    at expensiveCheckFn (angular.js:15281)

angular-pickadate.js:70 indeed has an apply call: scope.$apply();. Any idea whats causing the error?

How to change date format

I want to change date format yyyy-MM-dd to dd-MM-yyyy can you help me.