0

I am setting up a dialog box for an employee to select a starting and ending time of their work using the Amazing Time Picker (https://www.npmjs.com/package/amazing-time-picker). I have set up two input tags with two-way binding. When the user selects the second time, the other element changes. For example, I select 8AM as my start time, then select 12PM as my end time. When I select 12PM, the start time changes to 12PM instead of staying at 8AM.

Beyond not finding anything in my google searches about two-way data binding affecting multiple fields, I have messed with changing the properties. I did not go too far down that path because it would have required me to change multiple components. I am wondering if I have to do that though, but I wanted confirmation first.

// Here are the start and stop input tags...
<input name="startTime" id="startTime" class="form-control" atp-time- 
picker type="time" [(ngModel)]="timestamp.date">
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="timestamp.date">

//The timestamp interface is just... 
public date: Date;

I want the end user to select a start and stop time and not have them change each other. I am planning on capturing these timestamps and putting them into a timecard object. Just for reference, my timecard details interface is...

...
 public timestamps: Array<Timestamp>;
...
 public constructor() {
     this.timestamps = new Array<Timestamp>();
 }

These details will be put into an array and then into a timecard for the employee...

...
 public timecardDets: Array<TimecardDet>;
...
 public constructor() {
     this.timecardDets = new Array<TimecardDet>();
 }
Clay Hess
  • 228
  • 6
  • 24

1 Answers1

0

You should use two different models-binding.

ts:

startTime: Timestamp;
stopTime: Timestamp;

html:

<input name="startTime" id="startTime" class="form-control" atp-time-picker type="time" [(ngModel)]="startTime">
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="stopTime">

so when you export that dates you could put them in an Array or just set them when they change in (change) methods


EDIT
html:

<input name="startTime" id="startTime" class="form-control" atp-time-picker type="time" [(ngModel)]="date[0]" (change)=calculate()>
<input name="stopTime" id="stopTime" class="form-control" atp-time-picker type="time" [(ngModel)]="date[1]" (change)=calculate()>

ts:

calculate() {
  // get the diff
}
Gaspar
  • 1,515
  • 13
  • 20
  • That is what I thought and I was going down that road, but did not want to go too far in case it was the wrong path since it will require multiple changes. I just took this project over. I think the previous developer was hoping to use a simple timestamp interface with a single timestamp to handle both start and stop. Bottom-line, I just want to grab a start and stop timestamp and do the math to see how long the individual was working. Are you aware of any resources that speak about this I can read through? – Clay Hess Apr 04 '19 at 19:29
  • see if [this post](https://dmkcode.com/2016/09/simple-timer-using-angular-2-and-rxjs-part-2/) helps you – Gaspar Apr 04 '19 at 19:37
  • Thank you for the information. What I have ended up doing is that since I only am interested in the hours difference between start and stop time, I am calculating it programmatically and not storing the individual times. I am doing the calculation and then updating the form input total field with renderer. Now I need to figure out how to trigger that the field value has changed. – Clay Hess Apr 05 '19 at 17:58
  • I just read your edit @gaspar. If I am doing the calculate method (which is the direction I took as you can see from my comment), what is the value in having the ngModel? – Clay Hess Apr 05 '19 at 18:00
  • if you declare your variable in local component all you need to do is e.g `this diff = this.date[1] - this.date[0];` inside `calculate()`. the way to calculate the diff in hours is [here](https://stackoverflow.com/a/3224854/3681565) – Gaspar Apr 05 '19 at 20:43
  • the variable inside `ngModel` (_startTime_, _date[0]_ in my example) changes automatically if the parentheses is between like `([ngModel])`, if you leave with square brackets only `[ngModel]` the value will only be GET – Gaspar Apr 05 '19 at 20:46