AngularJS Material ng-input-container resets time

Question

My goal is to have a single model for date and time.

Unfortunately I haven't found a stable date-time-picker component for AngularJS Material, so I'm using two elements sharing same model: standard md-datepicker and regular input type="time"

      <md-input-container>
        <md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <md-input-container>
        <input ng-model="ctrl.myDateTime" type="time">
      </md-input-container>

      <span>Date and time chosen: {{ctrl.myDateTime}}</span>

Firstly, I choose date. Once date is chosen, ctrl.myDateTime gets date value with 00:00:00 time (in browser time zone) that is displayed in span. Then I choose time. When time is set, it's displayed in span correctly as well.

The issue here: each time input type="time" losts focus (like onblur), for some reason time fraction is resetted to 00:00:00, but input keeps displaying the user's value.

And that's where I need help. The only thing that I figured out is if input is not wraped with md-input-container then time is resetted only once, and if I change it again, focus lost doesn't reset time.

How to avoid that?

Code sample to reproduce: https://codepen.io/mih-kopylov/pen/KKMxgBK

Cantrip

I tried your link. Appears to work without error. Maybe I’m misunderstanding your problem. Set date works. Set time works. Using mobile browser safari. Maybe it’s a browser issue? – Carbineer

@Carbineer that's odd. I've opened the link once again and the bug is reproduced. I'm using Chrome desktop (latest). Here's a link with video recorded (live till 30.11.2020) yadi.sk/i/JAP1f93pTBbWrg – Cantrip

I've also did the same in Chrome on Android, and in Firefox Desktop. Same thing is reproduced. The issue is reproducing once time input losts its focus. – Cantrip

I see the issue now. That is strange. – Carbineer

Have you given this a try beenote.github.io/angular-material-datetimepicker – Carbineer

Thanks, @tbone849, interesting thing. I'll take a look. – Cantrip

If you put both (md-datepicker and input) in the same md-input-container, the input is reset only once. – Frayne

@FrançoisB. good point, thanks. But why is it resetted at all - that's the question? – Cantrip

Answer 1

By changing the type from time to datetime you avoid this.
If you want to have only the time, you need an additional variable for it.

<md-content ng-controller="AppCtrl as ctrl" layout-padding="" ng-cloak="" class="datepickerdemoBasicUsage" ng-app="MyApp">
  <div layout="column">
    <div flex="">
      <md-input-container>
        <md-datepicker ng-model="ctrl.myDateTime" md-placeholder="Enter date"></md-datepicker>
      </md-input-container>
      <md-input-container>
<!-- when time is changed using input inside md-input-container, time is resetted on blur -->
        <input ng-model="ctrl.myDateTime" type="datetime">
      </md-input-container>
<!-- when time is changed using this input, time is resetted but only once -->
      <input ng-model="ctrl.myDateTime" type="datetime">
    </div>
    <span>Date and time chosen: {{ctrl.myDateTime}}</span>
  </div>
</md-content>

If you choose to separate the date and the time, you can use a function with:

myDate.setTime(myTime.getTime());

Lennielenno

That's not how it worked several versions of Angular Material ago. I've updated version, and faced this issue. And I don't need to have datetime because I want to leverage material datepicker component for date. So I would like to find the reason why it stops working and figure out if I can fix that before using another component – Cantrip