Angular 2 Calendar Implementation with PrimeNG Date in Epoch Time

I've encountered an issue with the PrimeNG calendar component when using time in milliseconds

HTML

<p-calendar [(ngModel)]="task.startDate"
    [minDate]="minDateValue"
    [maxDate]="maxDateValue"
    readonlyInput="readonlyInput"
    [showIcon]="true">
</p-calendar>

TypeScript

"startDate":1490039621704,

Instead of working correctly, I'm getting this error message:

EXCEPTION: Uncaught (in promise): TypeError: date.getMonth is not a function
TypeError: date.getMonth is not a function

Is there a way to specify the date format for this component to handle the milliseconds properly?

Update

Based on the documentation here, it mentions that the date format for milliseconds should be @ - Unix timestamp (ms since 01/01/1970). I tried adding the attribute dateFormat="@ " to the component but the issue persists.

angulartypescriptdatepickerprimeng

Answer №1

The error message indicates that a Date Object is expected based on the error provided.

You can try the following code snippet:

date = new Date(task.startDate);

Potential solution after OP's update.

The issue might occur before the server responds with the value of task.startDate. To address this, you can initialize task.startDate as 0 at the component level to potentially resolve the problem.

export class AppComponent {

    task = { startDate: 0 };

    ...

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Get rid of the hyphen from a minus number

Is there a way to remove the dash when displaying negative numbers like -0.24%? I believe I don't need it because I already have a red arrow indicating negativity. https://i.sstatic.net/h5CFw.png I wonder if the issue lies in removing the dash or no ...

angular

Creating a custom datepicker in Vuetify with validation

I'm in the process of developing a new component that consists solely of a datepicker with validation capabilities. This component is designed to be versatile so that it can be easily integrated into multiple components. My goal is to display a red va ...

vue.jsdatepickervuetify.jsvee-validate

Failure to log in to Facebook via Angular and Google Firebase due to URL being blocked

I am currently in the process of developing a web application that aims to gauge political popularity. To ensure accurate polling data, users will need to authenticate their social media accounts including Facebook, Twitter, and Google. For the front-end ...

angularfirebasefacebook-login

Elements constrained by themselves in a rest parameter with generic types

When using Typescript, it is possible to infer tuple types for generic rest parameters that are constrained by an array type. However, in my specific case, this functionality does not seem to work as expected. I am attempting to pass a series of pairs co ...

typescript

Error: The FactoryMethod.render() function requires a valid React element to be returned, or null

An error has occurred: Error: FactoryMethod.render(): A valid React element (or null) must be returned. You may have returned undefined, an array, or some other invalid object. at invariant (react-dom.js:17896) Despite everything being fine during co ...

reactjstypescriptsharepoint

Angular 2 - synchronizing timer for all users

I have developed a timer that needs to function consistently for all users at the same time. To achieve this, I stored the start_time (timestamp when the timer begins) in my database and implemented the following code snippet to calculate the remaining ti ...

javascriptangularrxjs

What is the best way to align text alongside icons using ng-bootstrap in Angular 8?

I have a set of four icons positioned next to each other, but I want them to be evenly spaced apart. I tried using the justify-content-between class, but it didn't work. How can I achieve this? I'm creating a Progressive Web App (PWA) for mobile ...

cssangularbootstrap-4angular-materialmaterial-design

There are critical vulnerabilities in preact-cli, and trying to run npm audit fix leads to a never-ending loop between versions 3.0.5 and 2.2.1

Currently in the process of setting up a preact project using preact-cli: npx --version # 7.4.0 npx preact-cli create typescript frontend Upon completion, the following information is provided: ... added 1947 packages, and audited 1948 packages in 31s 12 ...

javascripttypescriptnpmpreactpreact-cli

The error message TS2304 is indicating that the name 'Set' cannot be found in electron-builder

I am trying to utilize the AppUpdater feature in electron-builder for my Electron Application. Upon importing the updater in my main.ts file: import { autoUpdater } from "electron-updater" An error is triggered when running the application: node_module ...

javascripttypescriptelectron-builder

Hold off on moving to the following page

My Angular website is performing well, but I've noticed that when clicking into a project, it loads the page instantly and there can be a flicker as the images are retrieved from the API. It would be ideal to have a slight delay or some sort of page t ...

angularangular2-routingangular2-templateangular2-directivesangular2-services

The click event in an Angular 6 loop is not being activated

When the Test is clicked, the function should be invoked. However, nothing happens when I click on it. Here is the HTML component code: <div class="row m-0 justify-content-between" *ngFor="let i of k[currentk]?.details | keys"> <div (click ...

javascriptangularhtmlcss

Utilizing google.maps.places.Autocomplete within a JHipster application with a modal pop-up feature

I am struggling to make google.maps.places.Autocomplete function properly within a modal in Jhipster 4.6.1 / angular 4.2. The issue lies with the display of results, as the z-index of the .modal seems to be conflicting with the google css, resulting in no ...

angularbootstrap-modaljhipstergoogle-places

issue with Angular: Unable to set both minimum and maximum values in the same input field for date type

I have been attempting to apply minimum and maximum values to an Angular code snippet, here is what I have: <input type="date" class="form-control" style="width: 30%" [disabled]="!dateSent" min="{{dateSent|date:&apo ...

angulartypescript

Tips for fixing prettier errors in express and TypeScript code

I have set up a simple Node/Express + Typescript application app.listen(PORT, (): void => { console.log(`app is running in ${environment} and listening on port ${PORT}!`); }); I am encountering an error and I am unsure of the cause? Replace PORT, wit ...

javascripttypescriptexpressprettiereslintrc

Issue: Nest is unable to determine dependencies for the AwsSnsService (?)

I've been attempting to connect a service from one module to another, but I keep encountering this error message: Error: Nest can't resolve dependencies of the AwsSnsService (?). Please ensure that the argument function() {\n if (klass !== ...

javascriptnode.jstypescriptdependency-injectionnestjs

Unlocking the power of URL manipulation in Fastify using Node.js

I'm attempting to retrieve specific parts of the URL from a Fastify server. For instance, the URL looks like this: http://localhost:300/query_tile/10/544/336 Within the Fastify server, I need the values for z/x/y. I've attempted the following ...

node.jstypescriptfastify

Misalignment of the search-icon in ion-searchbar and toolbar when focusing in Ionic 4+ Angular

When I add the ion-searchbar to my ion-toolbar, everything appears normal until the moment you click inside the search bar and trigger the (ionFocus)="onFocus()" method. The buttons in the toolbar disappear and the search bar expands to take up the full wi ...

angularionic-frameworkalignmenttoolbarsearchbar

Is there a way to modify a single object within an array?

Here is the HTML representation of my data: https://i.sstatic.net/VbKQ4.png page.html <ul id="elements"> <li *ngFor="let elem of fetchdata" (click)="log(elem)"> {{elem.title}} {{elem.description}} </li> ...

angulartypescript

Deliver a modification of the injected variable

I am facing an issue where I provide variables in a component and then try to inject/change them in the child component. Surprisingly, this setup works perfectly fine on the local server but once uploaded to the live server, the variable doesn't seem ...

typescriptvue.js

Is there a tool that can automatically arrange and resolve TypeScript dependencies, with or without the use of _references.ts file?

Currently, I am working on understanding the new workflow for "_references.ts" and I feel like there is something missing when it comes to using multiple files without external modules in order to produce correctly ordered ".js" code. To start with, I took ...

javascriptdependenciesgruntjstypescriptvisual-studio-2013