ember-observer-causing-an-issue

components.date-time-manager.js

import Component from '@ember/component';
import { computed } from '@ember/object';

export default Component.extend({
  time: computed('datetime', function() {
    let date = new Date(this.datetime);
    return `${date.getHours()}:${date.getMinutes()}`;
  }),
  
  date: computed('datetime', function() {
    let date = new Date(this.datetime);
    return `${date.getMonth() + 1}/${date.getDay()}`;
  }),
  
  actions: {
    updateTime(newTime) {
      let [hour, minute] = newTime.split(':').map(v => parseInt(v));
      if (!(hour && minute)) { return; }
      let date = new Date(this.datetime);
      date.setHours(hour);
      date.setMinutes(minute);
      this.update(date.toISOString());
    },
  
    updateDate(newDate) {
      let [month, day] = newDate.split('/').map(v => parseInt(v));
      if (!(month && day)) { return; }
      let date = new Date(this.datetime);
      date.setMonth(month - 1);
      date.setDate(day);
      this.update(date.toISOString());
    },
    
    updateToNow() {
      let now = new Date();
      this.update(now.toISOString());
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['exampleTime'],
  exampleTime: new Date().toISOString()
});

templates.application.hbs

<div>
  <input
    type="text"
    value={{this.exampleTime}}
    oninput={{action (mut this.exampleTime) value="target.value"}}
  >
</div>
  
<DateTimeManager
  @datetime={{this.exampleTime}}
  @update={{action (mut this.exampleTime)}}
  as |dt|
>

  <div>
    <input
      type="text"
      value={{dt.time}}
      oninput={{action dt.updateTime value="target.value"}}
    >
  
    <input
      type="text"
      value={{dt.date}}
      oninput={{action dt.updateDate value="target.value"}}
    >
   
    <button {{action dt.updateToNow}}>Insert Time</button>
  </div>

</DateTimeManager>

templates.components.date-time-manager.hbs

{{yield (hash
  time=this.time
  date=this.date
  updateTime=(action "updateTime")
  updateDate=(action "updateDate")
  updateToNow=(action "updateToNow")
)}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}