datepicker: When initializing a datepicker with an empty value and timezone set in in ng-model-options an exception is thrown

[nicklastromb]

Bug

Demo and steps to reproduce the issue

Demo url at https://stackblitz.com/edit/angularjs-material-blank-33zjhy?file=app%2Fapp.controller.js

Detailed Reproduction Steps

1. Create a controller with a new model value set to null
2. Add the md-datepicker to the view with the null model and set ng-model-options to e.g. {timezone: 'UTC'}
3. The datepicker will now throw an exception TypeError: Cannot read property 'getTimezoneOffset' of undefined when the view is loaded.

Can also be reproduced by initializing the datepicker with a date and then clearing the field (see screenshot below)

Explain the expected behavior

Expected behavior is to not get an exception when using a timezone in the ng-model-options together with a null/empty model value.

Explain the current behavior

A TypeError exception is thrown when the model is null/empty for the datepicker.

Discuss the use-case or motivation for changing the existing behavior

Behavior should only be resolved to not throw an exception when the value is null/empty and handle the value correctly.

List the affected versions of AngularJS, Material, OS, and browsers

• AngularJS: 1.8.0
• AngularJS Material: 1.2.1, 1.1.26, 1.1.25
• OS: Windows 10
• Browsers: Chrome 85.0.4183.121, Firefox 80.0.1

Add anything else we should know

The problem also occurs when clearing the value from a datepicker.

Problem seems to be located at the following positions:

https://github.com/angular/material/blob/v1.1.25/src/components/datepicker/js/datepickerDirective.js#L995

https://github.com/angular/material/blob/v1.1.26/src/components/datepicker/js/datepickerDirective.js#L995

material/src/components/datepicker/js/datepickerDirective.js

Line 995 in 709037d

if (timezone == null || value.getTimezoneOffset() < 0) {

Stack Trace

TypeError: Cannot read property 'getTimezoneOffset' of undefined
    at DatePickerCtrl.onExternalChange (angular-material.js:17694)
    at Array.eval (angular-material.js:17181)
    at Object.$$format (angular.js:31140)
    at Object.$processModelValue (angular.js:31120)
    at Object.$$setModelValue (angular.js:31152)
    at ngModelWatch (angular.js:31191)
    at Scope.$digest (angular.js:19200)
    at Scope.$apply (angular.js:19568)
    at bootstrapApply (angular.js:1966)
    at Object.invoke (angular.js:5208)
    at doBootstrap (angular.js:1964)
    at bootstrap (angular.js:1984)
    at angularInit (angular.js:1869)
    at eval (angular.js:36491)

Screenshots

[Splaktar]

Thank you for the detailed report!

It looks like this is actually caused by

material/src/components/datepicker/js/datepickerDirective.js

Line 1017 in 90d24cf

if (timezone == null || value.getTimezoneOffset() < 0) {