diff --git a/src/components/datepicker/datePicker-theme.scss b/src/components/datepicker/datePicker-theme.scss index 43204e4a74e..7bb1be8e8f0 100644 --- a/src/components/datepicker/datePicker-theme.scss +++ b/src/components/datepicker/datePicker-theme.scss @@ -9,6 +9,10 @@ md-datepicker.md-THEME_NAME-theme { .md-datepicker-input-container { border-bottom-color: '{{background-300}}'; + &.md-datepicker-focused { + border-bottom-color: '{{primary-500}}' + } + &.md-datepicker-invalid { border-bottom-color: '{{warn-500}}'; } diff --git a/src/components/datepicker/datePicker.js b/src/components/datepicker/datePicker.js index 6f16abaf1e3..838ec54458b 100644 --- a/src/components/datepicker/datePicker.js +++ b/src/components/datepicker/datePicker.js @@ -48,9 +48,10 @@ 'ng-click="ctrl.openCalendarPane($event)">' + '' + '' + - '
' + - '' + - + '
' + + '' + '' + @@ -143,6 +144,9 @@ /** @type {Date} */ this.date = null; + /** @type {boolean} */ + this.isFocused = false; + /** @type {boolean} */ this.isDisabled; this.setDisabled($element[0].disabled || angular.isString($attrs['disabled'])); @@ -371,6 +375,14 @@ }, false); }; + /** + * Sets whether the input is currently focused. + * @param {boolean} isFocused + */ + DatePickerCtrl.prototype.setFocused = function(isFocused) { + this.isFocused = isFocused; + }; + /** * Handles a click on the document body when the floating calendar pane is open. * Closes the floating calendar pane if the click is not inside of it. diff --git a/src/components/datepicker/datePicker.scss b/src/components/datepicker/datePicker.scss index 2c9bfe71225..61c8fcf2268 100644 --- a/src/components/datepicker/datePicker.scss +++ b/src/components/datepicker/datePicker.scss @@ -31,6 +31,10 @@ $md-datepicker-open-animation-duration: 0.2s; display: inline-block; width: auto; margin-left: $md-datepicker-button-gap; + + &.md-datepicker-focused { + border-bottom-width: 2px; + } }