Having trouble implementing ngmodel and pipe in p-calendar from primeng

I am currently working on implementing p-calendar from ng-prime along with ngmodel for binding a date retrieved from the server

 <p-calendar [(ngModel)]="selectedDate"
             [locale]="es"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body"
             class="pos-cal mar-left-txt"
             [(ngModel)]="currentUserData.person.dateOfBirth">
 </p-calendar>

 <p [hidden]="editing">
     {{currentUserData.person.dateOfBirth | date: 'dd/MM/yyyy'}}
 </p>

Although this code achieves my desired outcome, I have encountered one issue. The selected date is being set as today's date instead of the date of birth I want to display in the p-calendar component.

When I pick a date from the calendar, it correctly binds to the paragraph below. While I would typically use a pipe for this purpose, it has not proven successful in this scenario.

Answer №1

I recently came across a situation where I realized the importance of initializing the selectedDate variable. Without initialization, attempting to set selectedDate to

currentUserData.person.dateOfBirth
can lead to unexpected behavior.

In my own example, I opted to set it to the current date instead.

template

<p-calendar [(ngModel)]="selectedDate"
             [hidden]="!editing"
             dateFormat="d/mm/yy"
             appendTo="body" (onBlur)="editing = !editing"  >
 </p-calendar>

 <p [hidden]="editing" (click)="editing = !editing">
     {{selectedDate | date: 'dd/MM/yyyy'}}
 </p>

component

  selectedDate;
  editing = false
  constructor() {
    this.selectedDate = new Date();
  }

Take a look at the demo here!

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

Tips on assigning the ng-content of an Angular component within storybook

Trying to incorporate an Angular component that utilizes <ng-content> into Storybook has proven challenging due to difficulties specifying the content with a variable. The current code setup is as follows: import {Header1Component} from './head ...

Customizing the appearance of Indicators and Paginator in PrimeNG Carousel

I have integrated a carousel using PrimeNG which has the following design here Take note of the style of the carousel indicators and navigators. I want to achieve the default style of indicators/navigators for the carousel as shown here I have included t ...

Changing Ionic Column Widths Based on Content Length

In my dynamic ionic 2 grid system, I am facing a layout issue. <div> <ion-row> <ion-col > ; <ion-card-header class="card-header"> {{hunt.title}} </ion-card-header> </ion-col> <ion-col *ngIf="!hunt. ...

Reduce the use of if statements

Is there a way to optimize this function by reducing the number of if statements? The currentFeatures are determined by a slider in another file. The cost is updated if the currentFeatures do not match the previousFeatures, and if the user changes it back ...

Passing data with hashtags in the URL using Angular 2

I have a list of products registered in my application. Attempting to include the product name in the URL results in incomplete transmission due to the presence of a '#' hashtag in the product name: Front End var product = "PLASTIC #1JQ-M 1CV ...

How can you retrieve the property value from an object stored in a Set?

Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land). Let's say we have a Set: mySet = new Set([{item: SomeItem, s ...

I need to search through a tree structure in typescript based on a specific value without encountering a maximum stack call exceeded error

How can I perform a value-based search on a complex tree structure in TypeScript without encountering the maximum stack call exceeded error? I am attempting to navigate through an expandable tree using TypeScript, and I will provide the code snippet below ...

What is the best way to go back in Angular 5 - using href or location.back()?

I recently encountered a dilemma with my app where users navigate to a dead-end page without any way to return. Picture clicking on a program in a TV guide and getting stuck on that program's details page, not being able to go back to the main guide. ...

A guide on cycling through the data within the input fields

Here's my code snippet: <div class="form-group row text-right" *ngFor='let row of vipInput'> <label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label> <div class="col-sm-9 form-control-label m-t-5 ...

Differences Between Angular's Run Block and Bootstrap FunctionIn Angular

I am in the process of upgrading an Angular 1.5 application to Angular 2. To make this transition, I am following the steps to set it up as a hybrid application, as outlined in the official documentation. Although I started learning Angular with version ...

What is the best way to ensure that a mapped type preserves its data types when accessing a variable?

I am currently working on preserving the types of an object that has string keys and values that can fall into two possible types. Consider this simple example: type Option1 = number type Option2 = string interface Options { readonly [key: string]: Op ...

Windows authentication login only appears in Chrome after opening the developer tools

My current issue involves a React app that needs to authenticate against a windows auth server. To achieve this, I'm hitting an endpoint to fetch user details with the credentials included in the header. As per my understanding, this should trigger th ...

Angular14 offers a unique highcharts speedometer with multiple dials in the gauge chart for a visually stunning

Looking to create a unique speedometer design with an inner dial and an additional triangular indicator using Highcharts gauge within the Angular14 framework. Is it possible to include an extra indicator with Highcharts gauge in Angular14? Click on the l ...

URL causing Webpack 2 module to not be found

After successfully updating my Angular 2 project to work with Webpack 2, a new issue arose when using the resolve: { alias: {...} } key. In the past, this code functioned perfectly with webpack 1: webpack.config.js resolve: { // http://webpack.g ...

Unable to modify array in Angular 2 as it is either a constant or a read-only property

I am attempting to send a GET request to my backend API that will return an array of objects. The code I am using is as follows: small.component.ts (when the function openDepositModal() is called, it triggers the function getUserInventory() from auth.serv ...

Simulate asynchronous function in imported module

Is it possible to monitor the behavior of an asynchronous function in a module that has been imported? jest.mock('snowflake-promise'); import { Snowflake } from 'snowflake-promise'; describe('Snowflake', () => { let sn ...

How to retrieve the data from an inactive text field with a button click in an angular application?

Currently, I am working on an angular application and I'm looking for a way to copy text when a button is clicked. I need assistance in creating a function that can achieve this without relying on the clipboard API. Although I have considered using t ...

What is the necessity of ngrx/store when services and localStorages are available for use?

When it comes to Angular, we rely on ngrx/store to manage the state. However, I question whether all tasks can be effectively handled using services alone. What benefits does implementing the ngrx/store package offer? Your insights would be greatly appre ...

Resetting the form controls to their initial values does not maintain their disabled status

When creating a formGroup, I have some fields disabled by default. I want them to remain disabled even when the form is reset, with the reset action only setting the value to an empty string: this.formGroup = new FormGroup({ control: new FormControl( ...

A TypeScript class utilizing a static variable with the singleton design pattern

I have a query regarding the most effective way to code this scenario: Within a class, I require a static variable that is accessible throughout the entire project: connection Singleton without namespace: class Broker { static connection: Connection = u ...