restorando / angular-pickadate Goto Github PK
View Code? Open in Web Editor NEWA simple and fluid inline datepicker for AngularJS with no extra dependencies.
License: MIT License
A simple and fluid inline datepicker for AngularJS with no extra dependencies.
License: MIT License
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.
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
Would be nicer if you could click anywhere in a cell to select it.
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.
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!
When used with an input in a readonly or disabled input, the datepicker popup opens anyway
How can I show certain days as highlighted
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
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.
I want to change date format yyyy-MM-dd to dd-MM-yyyy can you help me.
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?
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.
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
Might want to add a demo to the readme http://plnkr.co/edit/8vOtguOh59vp84DPJZCh?p=preview
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.
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?
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?
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.
please add bower support
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.
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 ...
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.
I want to read actual month, the one is been shown, can I? How? Thanks!
Hey,
It would be nice to set the plugin options through a property like options
for date format and other usefull options.
Thanks
Add examples of multiple section of dates.
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.
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
I want to pick days back and forwards using keydown event, like left and right keys. Is it possible?
Once trying to get dates from multiple months it has two (inappropriate) behaviors :
can you make this MIT? love the simplicity and would like to fork it
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.
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
Not sure whats going exactly wrong here but this is my scenario (using Angular 1.5.3):
ui.router
)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?
The demo does not seem to work, I cannot select a date. When I click a day, nothing happens...
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.
This appears to require jQuery, am I mistaken?
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.
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);
});
};
}])
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
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 !
Is it possible to specify "container" attribute in angular? i tried, but it seems not to work.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.