Datepicker widget fro angularjs-ui doesn't display calendar

2,400 views
Skip to first unread message

galaxyintruder

unread,
Jun 20, 2012, 11:19:21 AM6/20/12
to AngularJS
I have some date values in my model and want display them in some
datepickers. I have found example of "ui-date" directive here:
https://github.com/angular-ui/angular-ui/tree/master/modules/directives/date

I followed the instruction but it doesn't work.This is my HTML file:

<html ng-app="testModule">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Angular Web Client</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<script src="lib/angular-1.0.0rc9.js"></script>
<script src="lib/angular-resource-1.0.0rc9.js"></script>
<script src="lib/jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"></
script>
<script src="lib/jquery-ui-1.8.21.custom/js/jquery-
ui-1.8.21.custom.min.js"></script>
<script src="lib/angular-ui-angular-ui-42869a6/build/angular-
ui.min.js"></script>
<script src="lib/angular-ui-angular-ui-42869a6/modules/directives/date/
src/date.js"></script>
<script src="js/testModule.js"></script>

<link rel="stylesheet" type="text/css" href="lib/jquery-
ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css">
</head>
<body>
<div class="wrapper">
<input ui-date name="dateCreate" ng-model="date01"></input>
</div>
</body>
</html>

...and here is module declaration:

var testModule = angular.module('mainModule', ['ui.directives.date']);


Why when I click on this control it doesn't show calendar ? Maybe I am
including too many scripts?


Dan Doyon

unread,
Jun 20, 2012, 11:51:27 AM6/20/12
to ang...@googlegroups.com, angul...@googlegroups.com
copying to angular-ui google group
> --
> You received this message because you are subscribed to the Google Groups "AngularJS" group.
> To post to this group, send email to ang...@googlegroups.com.
> To unsubscribe from this group, send email to angular+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/angular?hl=en.
>

Dan Doyon

unread,
Jun 20, 2012, 1:30:21 PM6/20/12
to angul...@googlegroups.com, galaxyintruder, ang...@googlegroups.com
So, my guess is that you probably need to have jquery.js above angular.js so that angular knows to use the full jquery version versus the jquery lite that is inside of angular. I put together a quick jsfiddle, styling is yukky (probably missing some import or options- lazy) but it works. 



On Jun 20, 2012, at 8:19 AM, galaxyintruder wrote:

kran...@gmail.com

unread,
Jun 21, 2012, 12:06:34 PM6/21/12
to ang...@googlegroups.com, angul...@googlegroups.com, galaxyintruder
As you can see in this fiddle, it doesn't work in 1.0.0:

I removed scope:{ uiDate: 'evaluate' }, and it seems to be semi-working except it won't apply the value from the datepicker to the model.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

Dan Doyon

unread,
Jun 21, 2012, 1:07:12 PM6/21/12
to ang...@googlegroups.com, angul...@googlegroups.com
(resubmitting so google groups sees, I think its pretty important)

So, 

Yesterday, I was myself in a bit of a quagmire, I had exactly the same error message for a different directive and it was a ball-buster (excuse the vulgarity). My colleague reported the error to me after pulling down new code. The strange bit was that everything worked fine in my Firefox (not his) but it didn't work in IE8/Chrome. 

And guess what? Turns out it was an errant invisible character at the end of the directive. And I recognized that character as coming from the angularjs docs. I only found this out when doing a compare in perforce.  I had seen this character before, coz, when I would copy code from old angular docs it would pull these characters that looked like 'aE' into my IDE (Eclipse). And side note, it came from a directive from the bootstrapModal directive. I see that Andy Joslin has changed it to coffeescript so the problem may be gone from his code. 

Its a stretch but worth looking into.

--dan

To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/YR-25DE0EiMJ.

To post to this group, send email to ang...@googlegroups.com.
To unsubscribe from this group, send email to angular+u...@googlegroups.com.

Dan Doyon

unread,
Jun 21, 2012, 4:02:09 PM6/21/12
to ang...@googlegroups.com
cool, this will come in handy revving up the angular-ui version.

thx

On Jun 21, 2012, at 12:38 PM, Kranklin wrote:

Since the angular-ui datepicker wasn't working properly with Angular v1.0.0, I made a fork which seems to do the job.    http://jsfiddle.net/m8L8Y/4/ 

It needs some work to be compatible with different date formats - the formatDateForModel function will need to be changed unless you want to save the date in the format "/Date(UnixEpoch)/" for .NET. You can see it in action here:   . 
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/0GZVpcTdrRwJ.

Dan Doyon

unread,
Jun 21, 2012, 4:04:20 PM6/21/12
to ang...@googlegroups.com
Hmmm, I think when I have some time, I'm going to fish around the angular doc stuff. It would really surprise me that jsFiddle was including the same weird character that angular docs have.  I'm leaning towards angular js as the origin of this.

just a thought

On Jun 21, 2012, at 11:33 AM, Andy Joslin wrote:

JSFiddle appends a weird character to the end of the Javascript pane, it may be that.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/UcCD5LF62ZwJ.

Dan Doyon

unread,
Jun 21, 2012, 11:15:22 PM6/21/12
to ang...@googlegroups.com
Cool will take a look , thx

Sent from my iPhone

On Jun 21, 2012, at 5:11 PM, Kranklin <kran...@gmail.com> wrote:

I updated my code so that you can customize the directive through attributes. I believe its ready for general use - I spent a good bit of time testing it.

The example shows how to use different formats for the dates. date01 is always stored as Date object. date02 is stored as a string.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.
To unsubscribe from this group, send email to angular+unsubscribe@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/angular?hl=en.

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To view this discussion on the web visit https://groups.google.com/d/msg/angular/-/MUCBmuWq7voJ.
Reply all
Reply to author
Forward
0 new messages