This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

New in Angular 1.3: ngModelOptions allows you to set a timezone on your model.

1:19 Angular 1.x lesson by

ngModelOptions in angular allows you to set several handy options of your ngModels, including the timezone for dealing with dates and times.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

ngModelOptions in angular allows you to set several handy options of your ngModels, including the timezone for dealing with dates and times.

Avatar
Attend

Game changer. Can pass datetime data directly to a server with a timezone set as UTC (I imagine most are) after specifying it with ngModelOptions. Thank you!

Angular 1.3 comes with a new directive called ngModelOptions. It's very simple. You pass in an object. I've got that object here. It allows you to more finely tune your ngModel and how Angular deals with that model.

One of the cool things that you can do with it is specify time zone. Currently, the only value that's valid for this property is UTC. Hopefully, in the future, more will be available, but this is what you have for right now.

What this does is it allows the view and the model to have a different time zone. It only makes sense for a date or a time type. We'll change it from email to time, and then we'll set it here. 1:00 AM in UTC is translated in 18:00 in MST, which is my time zone.

The actual bound value, the model's value, is set to my time zone, whereas the view value is set to the UTC time zone. If I were to take this out and go back to 1:00 AM, then it's 1:00 AM in my time zone. That's what the time zone property does, and that's one of the cool properties that are available in ngModelOptions.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?