I'm currently creating web application which will use REST API to GET/POST data to postgreSQL from UI using Angular CLI, node.js and TypeScript. I have few date fields that needs to be converted to Human readable format from unix timestamp, so I chose DatePipe method to do that job.
But strange thing is that unix timestamp is converting in to wrong date and time by DatePipe.
I have gone through several questions in web and Stackoverflow related to this, but nothing helped. So I decided to post my piece of code and issue here again.
My Component.ts that corresponds to the EDIT page
import { Component, OnInit } from '@angular/core';
import { RestApiService } from "../shared/rest-api.service";
import { ActivatedRoute, Router } from '@angular/router';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-inventory-details',
templateUrl: './inventory-edit.component.html',
styleUrls: ['./inventory-edit.component.css'],
providers: [DatePipe]
})
export class InventoryEditComponent implements OnInit {
id = this.actRoute.snapshot.params['id'];
inventoryData: any = {};
constructor(
public restApi: RestApiService,
public actRoute: ActivatedRoute,
public router: Router,
public datepipe: DatePipe
) {
}
ngOnInit() {
console.log("id value is"+ this.id)
this.restApi.getInventory(this.id).subscribe((data: {}) => {
this.inventoryData = data[0];
console.log('the date element is ' +this.inventoryData.warranty_date)
this.inventoryData.warranty_date = this.datepipe.transform(this.inventoryData.warranty_date, 'yyyy-MM-dd');
this.inventoryData.purchased_date = this.datepipe.transform(this.inventoryData.purchased_date, 'yyyy-MM-dd');
console.log('the date element is ' +this.inventoryData.warranty_date)
console.log(JSON.stringify(data))
})
}
// Update inventory data
updateInventory() {
if(window.confirm('Are you sure, you want to update?')){
this.restApi.updateInventory(this.inventoryData).subscribe(data => {
this.router.navigate(['/inventory-list'])
})
}
}
}
inventory-edit.component.html
<div class="container custom-container">
<div class="col-md-12">
<h3 class="mb-3 text-center">Update Inventory</h3>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Device Name</label>
<input type="text" [(ngModel)]="inventoryData.device_name" class="form-control" placeholder="Device Name">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Device Type ID</label>
<input type="text" [(ngModel)]="inventoryData.device_type_id" class="form-control" placeholder="Device Type ID">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Serial No</label>
<input type="text" [(ngModel)]="inventoryData.serial_no" class="form-control" placeholder="Serial No">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Model</label>
<input type="text" [(ngModel)]="inventoryData.model" class="form-control" placeholder="MODEL">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">RAM ID</label>
<input type="text" [(ngModel)]="inventoryData.ram_id" class="form-control" placeholder="RAM ID">
</div>
<div class="form-group"><div class="col-md-12 form-group form-inline">
<label class="col-sm-3">HDD ID</label>
<input type="text" [(ngModel)]="inventoryData.hdd_id" class="form-control" placeholder="HDD ID">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Processor</label>
<input type="text" [(ngModel)]="inventoryData.processor" class="form-control" placeholder="Processor">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">OS ID</label>
<input type="text" [(ngModel)]="inventoryData.os_id" class="form-control" placeholder="OS ID">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Warranty Date</label>
<input type="date" [(ngModel)]="inventoryData.warranty_date" class="form-control" placeholder="Warranty Date">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Purchase Date</label>
<input type="date" [(ngModel)]="inventoryData.purchased_date" class="form-control" placeholder="Purchased Date">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Description</label>
<input type="text" [(ngModel)]="inventoryData.description" class="form-control" placeholder="Description">
</div>
<div class="col-md-12 form-group form-inline">
<label class="col-sm-3">Repair</label>
<input type="text" [(ngModel)]="inventoryData.repair" class="form-control" placeholder="Repair">
</div>
<div class="form-group">
<button class="btn btn-success btn-lg btn-block" (click)="updateInventory()">Update Inventory</button>
</div>
</div>
</div>
Issue I'm facing
I'm getting below timestamps from postgreSQL DB which I want to convert
warranty_date: 1583778600
purchased_date: 1584037800
After converting the timestamps, I'm getting below results which is completely wrong
warranty_date: 01/19/1970
purchased_date: 01/19/1970
But expected results should be
warranty_date: 3/10/2020
purchased_date: 3/13/2020
Even I double checked by just pulling timestamps with out converting to see whether expected timestamps are reflecting in my code and everything seems to be fine until DatePipe comes in to picture.
I'm not sure what mistake I'm doing in my current code. After going through several blogs and examples online, I find this DatePipe method is bit easy to get my task done, but no luck. Before proceeding with next approach, I really want to understand why this is happening.
Can someone help me in resolving this issue or understand why this is happening? Is this something related to browser settings?
Your postgreSQL DB use timestamps in seconds, but javascript Date use timestamps in milliseconds.