angularUI datetimepicker

[Sunitha Itham]

Hi,

How to integrate angularui datetimepicker to angularjs?

[Maximilian Eberl]

I found the angular ui datepicker extremely
unhandy and You have to import many
things that You never use.

Have a quick look at datepickr:

http://code.google.com/p/datepickr/

The only things to include are
a little js file (10 kB) and a little css file (2 KB)

In Your template You give the element
an id (in this case 'day'):

<input type="text" id="day" style="width:80px" />

and in Your controller

// attach a datepicker to the field 'day'
$scope.attachDatepickr = function() {
    window.setTimeout("new datepickr('day', {'dateFormat': 'd.m.Y'})",1000);
};

datepickr(id,format) is in datepickr.js

The little timeout is needed to let Your
application finish.

Works just like expected and You can attach
the datepickr to many different elements.

If anyone has a more 'angularish' way (aka
a working binding that detects changes made
with datepicks): let me kmow !

[Owen M]

I agree with Maximilian, although AngularUI is great, it does come with a lot of extra things. So there are lighter weight routes to get a date picker. Or in this case a datetime picker.

For my app I've created a dateInput directive. Add the attribute my-dateinput="MMM D YYYY" to your input, and you're good to go. The string specifies the output format. It uses Pikaday for the date picker. If you also need time support, use my modified version: https://github.com/owenmead/Pikaday

Here is a fiddle showing it all together:

http://jsfiddle.net/W9A7y/1/

Optionally you can include http://momentjs.com/ for nicer formatting and parsing of dates, but not required.

Cheers,

~Owen

[Mathieu Chauvinc]

Hi,

If you're interested, I've wrapped around Kalendae (framework agnostic calendar) into angular directives here: https://github.com/matiboy/lis-ui-elements. (requires to have kalendae.js installed as well).

It's part of a few UI elements that I'm trying to avoid having to recode, by wrapping framework agnostic elements into directives, so there is also a (poorly working) slider based on fdSlider in there. Planning to separate each element into several projects.

Usage: attribute kalendae or inputKalendae directives in the HTML and add a lis-option attribute (json encoded - follows Kalendae options as seen here: https://github.com/ChiperSoft/Kalendae)

Mat

[Mathieu Chauvinc]

[Maximilian Eberl]

It's impressive to see, how much people
are more intelligent than I am ;-)

I prefer Owen's solution, because it smells

more 'angularish' and the angular binding
recognizes changes from the datepicker.

One tiny little problem: it binds to one day

before the selected day.

I select 01 01 2014 (or any other day)

in the datepicker and the bound element

shows 1 day before: 31 12 2013.

That can create problems, for example:

You invite Your girlfriend for May 7th

(when Your wife is somewhere far away)

but she receives the wrong information
and arrives May 6th - when Your wife
is still at home.

The consequence could be a massacre

- or a good job for two lawyers.

What's wrong ???

2013/5/7 Mathieu Chauvinc <mathieu....@gmail.com>

--

You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/4h1QElvQ78o/unsubscribe?hl=en-US.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular?hl=en-US.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Maximilian Eberl]

how MANY people - sorry!

2013/5/7 Maximilian Eberl <meb...@gmail.com>

[Owen M]

So if you set the date on the model then use the calendar? What steps are you doing to get the "one date before" bug?

[Pertti Kellomäki]

Hi Maximilian,

On Tue, May 7, 2013 at 8:01 PM, Maximilian Eberl <meb...@gmail.com> wrote:

I select 01 01 2014 (or any other day)

in the datepicker and the bound element

shows 1 day before: 31 12 2013.

I think you are probably seeing this:

pk@stoffer:~$ js

> d = new Date(2013, 4, 7)

Mon, 06 May 2013 21:00:00 GMT

> d.toISOString()

'2013-05-06T21:00:00.000Z'

The problem is that the Javascript Date object is not really a "date", it is a specific point in time. If you don't pass hours, minutes, seconds, and milliseconds to the constructor, they default to zero.

Confusion sets in because the Date object constructor assumes the values to be local time. In my case I am in EET which is three hours ahead of UTC, so 2013-05-07 00:00:00 EET works out to be 2013-05-06 21:00:00 GMT...

-- 

Pertti

 

[Mathieu Chauvinc]

Hi Maximilian,

I understand your point and to be honest, if I'd know about Owen's directive, I would have used that :) 

I'm surprised however that from what I understand putting an ng-model doesn't bind data in my UI elements?

@Owen

Let me know if you need help implementing more of the options on your project, I see that Pikaday has plenty. I went the lazy way on my Kalendae and just json-encoded everything into an attribute, but I'll gladly help if you want to implement all configurations seen on the wiki, cleanly.

Mat

[Vitalii Fedorenko]

There is also another datetimepicker directive for angular that can be found at https://github.com/zhaber/datetimepicker