g00fy- / angular-datepicker Goto Github PK

don`t work ng-change
show how to apply ng-change

Hey, I'd like to be able to set times on a date-range. Wondering if this is possible or anywhere on the roadmap?

I have an input field with datetime picker, bad when I pick the datetime everything is ok, but when I change this vaue in input field(not in template) the data doesn't change.

i use the directive like this:
<div date-range start="model.filters.startTime" end="model.filters.endTime"></div>
by random clicking and double clicking i easily end up with something like this image shows

help!

I made some patches here and there to create a proper angularjs calendar directive that supports showing events on a calendar like the crappyheavily bloated, jquery and jquery-ui-based angular-ui calendar.

Since event templates are most likely something you want to customize I made this an external template, this also allows for binding ng-click events from outside the directive without going through too many hoops.

I've included a standard event service and defined a minimal api to start with.

It could still use some polishing probably, but please take a look and see if you want to merge it. I'll send a pull request from my branch.

Hello,
Would you do a multi date picker ?
Take care.

Angular 1.3 introduces strict checking, that every injectable function must use explicit annotation of dependencies. (This is very useful if you want to obfuscate the code)

see https://docs.angularjs.org/api/ng/directive/ngApp ngStrictDi for details.
[$injector:strictdi] datePickerDirective is not using explicit annotation and cannot be invoked in strict mode

From the demo, goring from :

<div date-range start="a" end="b" style="position: relative; z-index:0"></div>

to :

<div data-date-range data-start="a" data-end="b" style="position: relative; z-index:0"></div>

What is weird is, it works with :

<div date-range data-start="a" data-end="b" style="position: relative; z-index:0"></div>

When you normalize the date-range attribute, the coloration ceases to work ='(

This occurs when the date-picker attribute is included on an element which is inside a jQuery UI dialog window. Any clues?

It pops up but the phone acts like it's only an edit control and no amount of touches will activate the popup calendar component for selection.

And with this issue I'm forced to move on, this is too bad because I really like the simplicity and ease of use of this control but it's clearly not ready for mobile at all.

Hi,

Is this repo still active ?
Your datepicker seems really interesting but

• bower install is completly broken (no main files declared in bower version, wrong version numbers 1.0.0 instead of 1.0.3...)
• many pull resquests not merged and issue not responded
• demo is a little broken
• documentation is really poor ...

I would love to help on some parts but I want to be sure that this repos is still active and my work will be usefull.

Thanks !

The instructions say how to 'build' it, but it's more useful to have instructions on how to include it in your own project.

I took the following steps:

bower install angular-datepicker

added to index.html (as copied from the example):

<script src="bower_components/angular-datepicker/app/scripts/datePicker.js"></script>
<script src="bower_components/angular-datepicker/app/scripts/dateRange.js"></script>
<script src="bower_components/angular-datepicker/app/scripts/input.js"></script>

(it seems one script tag should be enough, why make users include 3?)

Add 'datePicker' to the dependencies of your angular.module

This ends up complaining about not finding the template, so as I'm unsure how the templates are supposed to be found by the script files, I symlinked them into my app dir:

ln -sf pwd/app/bower_components/angular-datepicker/app/templates/datepicker.html app/templates/

Now I'm at the point where I get an unstyled widget, I'm sure the .css needs adding somewhere too, but I'm a bit tired at this point to do trial and error to get this to work.

subj

Is there somewhere a minimal, full example on how to load and use angular-datepicker?

1. set default width for datepicker element
2. change datepicker position to relative
3. set width of tds to percent values

Hi there,

So I ran into this scenario today:
http://plnkr.co/edit/uEXSBUqLuTmeKa7mhTGt?p=preview

How can I gain access to the date-time value outside of the date-picker for use in a directive that needs to $emit the final value out?

It may just be me misunderstanding something but it seems that there is a lot of global namespace pollution in datepicker.js. There are a whole bunch of functions which are declared globally (isAfter, isBefore, isSameYear, etc.).

I have a problem where I have a pop-up form containing a datepicker. In the page beneath the form I also have a datepicker. If I use the datepicker in the pop-up form and then close (i.e. destroy) the form, I then get a whole bunch of missing function errors when I do any dom manipulation on the page beneath.

I don't really know why this is happening but I suspect it is to do with these global functions, which are the ones being called. E.g.

TypeError: undefined is not a function
at isSameYear (/angular-datepicker-master/app/scripts/datePicker.js:128:25)
at isSameMonth (/angular-datepicker-master/app/scripts/datePicker.js:132:10)
at isSameDay (/app/scripts/datePicker.js:136:10)
at isSameHour (/angular-datepicker-master/app/scripts/datePicker.js:140:10)
at Scope.scope.isSameHour (/angular-datepicker-master/app/scripts/datePicker.js:299:32)

Hey, first of all, amazing datepicker.

We are using bower in our project and we wanted to know if it is possible for you to create a new version with the current master branch that fixes the minifying problem of PR #24 ?

Thanks!

I set date in the 08.09.2014 00:00:00.000, thereafter I set date in 31.08.2014 and date is setted in 01.08.2014.

I think that title is self explanatory. I need somehow emphasize "today" in datepicker.

Autoclose of the datepicker when selecting a value on the min-view would be very appreciated 👍

I was using datepicker as follows:

<div class="dropdown-menu" ng-click="update()">
<div date-picker="due" max-view="year" min-view="date">
</div>
</div>

In both versions it works if $scope.due is set to a value.

If it is set to undefined, and the version is 1.3.0-beta.7 (the next release candidate) it stops working, and generates this exception:

TypeError: undefined is not a function
at http://0.0.0.0:9001/bower_components/angular/angular.js:22066:55
at publicLinkFn (http://0.0.0.0:9001/bower_components/angular/angular.js:6264:29)
at boundTranscludeFn (http://0.0.0.0:9001/bower_components/angular/angular.js:6406:21)
at controllersBoundTransclude (http://0.0.0.0:9001/bower_components/angular/angular.js:7047:18)
at http://0.0.0.0:9001/bower_components/angular/angular.js:22064:27
at processQueue (http://0.0.0.0:9001/bower_components/angular/angular.js:12018:27)
at http://0.0.0.0:9001/bower_components/angular/angular.js:12034:27
at Scope.$eval (http://0.0.0.0:9001/bower_components/angular/angular.js:13202:28)
at Scope.$digest (http://0.0.0.0:9001/bower_components/angular/angular.js:13014:31)
at Scope.$delegate.proto.$digest (:844:31)

Hi,

I would like to try your datepicker, but it doesn't work out of the box for me.
My I don't use it right. A little more dokumetation or a demo on fiddler or plunker may help.

You've did a bower package and the module ist on ngmodules so I guess it is ready for use.

Which browsers do you support?

I'm probably just missing something but... when I tried to implement this in my project the template path being relative wasn't working so.. how do I modify the config?

I am looking to see if this control can be used when a date can be entered or not depending on needs. In my case the user records the last date an event occurred, but it is possible that the event has not occurred before and should be blank. Currently the angularJS Model is not updated by clearing an input box:

<input required="false"  format="yyyy-MM-dd" type="text" min-view="date" date-time data-ng-model="last_action">{{last_action}}

Is there a way to allow the clearing of the input box to update the model?

The current while loop doesn't take into account that the month could have ended already in the current week it's processing, showing a maximum of 7 rows for a month display.

This can be tuned down to max 6 and be variable to min. 4 in some cases.
Without PR:

With PR:

Although I'm selecting 9am in the morning and that's the value showing in my field. The actual value that get's input to the angularJS model is 2 hours earlier.

Why would that be and how can I correct for this offset?

I'm new to AngularJS and I'm trying to use datepicker as popup picker setting dismiss config to true. But once clicked and got focus (so that showPicker function is called and picker successfully appeared) the button keeps its focus after the date is picked and picker disappeared. So next clicks on the same button don't call showPicker and picker doesn't appear until the focus is manually moved to some other element. Can this be fixed, please?

Getting

ParseError: Unrecognised input in app/bower_components/angular-datepicker/app/styles/mixins.less on line 558, column 3:
557
558 .core (@gridColumnWidth, @gridGutterWidth) {
559
Warning: Error compiling app/styles/main.less Use --force to continue.

googling seems to suggest that this is due to bootstrap2 css being used and not being compatible with recent less versions.

Right now data picker is showing 24hr timing but I would like to make it AM/PM time, couldn't find a way to do that.

The output from this seems to be ISO (i.e. YYYY-MM-DD"T"HH:MM:SS"0Z")
Is there any way to alter the output format?

Odd thing is that it shows the correct format in the field, but when the data from the model that the field updates is submitted via $http the date's format is ISO.

Hi,
We'd like to use this widget in one of my project and we need to know the license for the library. Could you please document the license?

thanks
-jason

Because of Daylight saving, the day that changed the time it is duplicated.

example:

10/18/2014 00:00:00 + One Day
10/18/2014 23:00:00

Tried to use the directive but instead I get distorted div with dates displaying vertically.

Hello,

I just refactored one of my directives into more reusable component - I used isolate scope. date-time stopped working after that.

Here is a live demo. Just uncomment the scope definition in directive's code to observe the problem.

I was fiddling around and figured out that this can be solved by replacing scope.$digest() to scope.$apply() in focus binding.

There is not option for set Minimum and maximum date selection.

Please run your distributions through JSLint... So many duplicate "use strict" and var Module are present...

Also the bitwise operators give JSLint errors, so either refactor or add

/*jslint bitwise: true */

If there is a date defined on the model, I'd like to be able to say starting-view="date" or something similar, to default to the "date" view when first clicked.

If you have something like:
<input type="text" date-time partial="true" ng-model="date" view="date" max-view="date" min-view="date"/>
On the first click on a date it scrolls to top of page.

But I found a fix and an explanation on why it works on the demo page.
If you add this to the page it somehow doesn't do it:
<div date-picker style="display: none"></div>

is there plans to add multilanguage support for months and days of the week names?

Not sure if I'm missing something or...

All works great but i just need to remove datepicker when user selects a date.

When clicking on item in calendar, active class is set but then removed instantly from that item.

in the current implementation you can limit the dates by using:

    $scope.$watch 'model.filters.endTime', (value) ->
        if value > new Date()
            $scope.model.filters.endTime = new Date()

but this still allows the user to navigate to unwanted future days

i think there should be a min/max limit that blocks the user from navigating outside the wanted range, i recommand using the min and max attribute and integrate them like they work for the input[date] element

I want to rewrite the whole thing as there has been some bad design decisions made in the past. What I am planning to do:

1. Still have separate date-picker date-range input[type=date] directives
2. Handle positioning differently (position absolute & observe window as using current implementation breaks on some pages.
3. Change syntax of attributes/settings from max-view to something similar to ng-model-options="options"
4. Remove the template option as this creates some overhead and makes dealing with ngModelController harder. If you still want to use custom templates then you could do:

angular.module('module',[]). directve('myCustomDatePickerDirective', function(datePickerDirective){
   return angular.extend({},datePickerDirective[0],{templateUrl:'your template'});
});

1. Integrate with ngModelOptions (use update and debounce)
2. Don't require jQuery
3. Provide customizable parser that would try match format
4. Still thinking on this - support date as string (just like <input type="datetime-local"> does)
5. rename dist/index.js to angular-datepicker.js etc.

Please feel free to add any requests, usecases or suggestions.

Hi,

Our team is currently testing several datetime pickers to find out which one could best fit our needs.

We were surprised to see that only development dependencies are currently defined for bower and npm.

bower.json
package.json

According to the README, I know about Angular 1.2+ but not sure if this module requires something else.

So I would suggest this move in bower.json

"dependencies": {
  "angular": "~1.2.0"
}

Thanks.

Any plans to include timezone selection? I have a requirement in a project to include timezone selection for an enterprise application.

On an Android tablet using this component causes the soft keyboard to appear when you focus into the control and are trying to select dates which (on my form) is obscuring the control.