Are there any specific events in PrimeNg's p-calendar that trigger when the time is changed?

In my project, I utilized PrimeNg v5.2.7 for the From Date and To Date fields. I implemented minDate validation on the To Date field. However, I encountered a scenario where if I select 30th Jan 2021 as the From Date and only adjust the time in the To Date, today's date (27th Jan 2021) gets automatically selected in the To Date, which is an incorrect behavior.

<p-calendar class="date" [minDate]="null!=model.start_date?model.start_date:dateTime"
[(ngModel)]="model.end_date"
[showIcon]="true" [showTime]="true" showButtonBar="true" [formControl]="form.controls['end_date']"
(onSelect)="onChangeEndDate()" [readonlyInput]="true"></p-calendar>
javascriptangulartypescriptcalendarprimeng

Answer №1

Consider using the following method:

You have the option to utilize (ngModelChange) in your calendar. This will be triggered whenever there is a change in the field's value.

<p-calendar class="date" [minDate]="null!=model.start_date?model.start_date:dateTime"
[(ngModel)]="model.end_date"
[showIcon]="true" 
[showTime]="true" 
showButtonBar="true" 
[formControl]="form.controls['end_date']"
(onSelect)="onChangeEndDate()" (ngModelChange)="onChangeEndDate()" 
[readonlyInput]="true"></p-calendar>

This suggestion may prove beneficial for you...

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

a guide on configuring a default input value from a database in a React component

In my current project, I have an input field with the type of "checkout" and I am looking to utilize Firestore to retrieve a default value. Once I obtain this value, I plan to store it in the state so that it can be modified and updated as needed. Here i ...

javascripthtmlreactjsfirebasegoogle-cloud-firestore

I encountered difficulty clicking a button due to its unique button data-order-group-id while using python and selenium

Need help with javascript code for repeating orders: <div class="col-ea-1 repeat-order repeatable-order"> #common row in other snippets <button data-order-group-id="a9755447-04ff-4d00-59bf-06ff87f8ead6" #different row data- ...

javascriptpythonpython-3.xseleniumselenium-webdriver

When calling an API endpoint, nodeJS is unable to access the local path

I've encountered a strange issue with my code. When I run it as a standalone file, everything works perfectly fine. However, when I try to utilize it in my API endpoint and make a request using Postman, it doesn't seem to function properly. What ...

javascriptnode.jsexpresspath

"How to retrieve data from a nested object in MongoDB by referencing variables

I am facing an issue with accessing nested objects using a variable in the npm package mongojs. Despite my efforts, the code snippet below is not working as expected: let userID = req.user._id, marketName = req.body.marketName, itemNam ...

javascriptnode.jsmongodbecmascript-6mongojs

Adding every single table located in a div onto the body of the document

In my code, there is a div containing 3 tables. var x = tempDiv.getElementsByClassName("hiscore_table"); I can confirm this because when I log it in the console, it shows like this: https://i.sstatic.net/iYBB8.png To organize the tables, I create a new ...

javascript

DIV will not show the Real Ajax Uploader interface

I've hit a roadblock. I recently purchased the Real Ajax Uploader Source codes and it functions perfectly on its own. However, when I attempt to display it in a DIV, things go haywire - only showing one DIV with non-functional JS code inside. There ar ...

javascriptphpjquerycssajax

Exposing the full binary in jQuery

Can anyone explain how jQuery can display the entire binary representation of a number without removing the leading zeros? Here is the code snippet: HTML: <input id="input" type="text" size="20"> <input id="result" type="text" size="30"> < ...

javascriptjqueryhtmlbinary

PDF Embed Whitelist

Is there a way to embed PDFs on a specific domain in a read-only format without allowing saving or downloading? While services like Scribd and Slideshare offer private options, I haven't found one that allows whitelisting for embeds on certain domains ...

javascriptnode.jspdf

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

javascriptjqueryandroidcss

The type of undefined cannot be assigned to the specified type

I am currently working on implementing a pie chart (donut series) in Angular. Below are my HTML, CSS, and TypeScript files. I am following this tutorial resource: Link to CodeSandBox - https://codesandbox.io/s/apx-donut-simple-8fnji?from-embed import ...

javascriptangulartypescriptapexchartsdonut-chart

Discovering the true width of an element using JavaScript

Hey there, I'm currently attempting to determine the exact width of a specific element and display an alert that shows this width. The code I am using is as follows: HTML Element <table cellspacing="1" cellpadding="5" style=";width:975px;border: ...

javascriptjqueryhtml

"Exploring the world of jest.doMock: A guide to mocking

Here is the code snippet I am testing: ... import data from '../data/mock.json'; // function is async export const something = async () => { try { ... if (!data) { throw 'error is here!'; } ...

javascripttypescriptunit-testingjestjsbabel-jest

XML and numerous, distinct DIV elements

Is it possible to display content from an XML file in a DIV upon clicking, without using IDs and involving multiple DIVs? For instance, when clicking on the first link in the following code snippet, the content from an XML file should only appear in the r ...

javascriptxmlajax

Why is the JS Component failing to appear on the page?

My component is not rendering on the page. Despite no errors or warnings, I have logged the gameData value and confirmed that all data is correct. Below is the function being exported: export default function AllGameDeals( gameData ){ const dealArr = ...

javascriptreactjsnext.js

What is the process of displaying an image every 5 seconds in React?

Each time you visit this URL: , a new image is displayed. I am trying to make my React component show a different image with this URL every 5 seconds, but I'm having trouble. Here is the code I have: import { useEffect, useState } from "react"; ...

javascriptreactjsreact-nativereduxreact-hooks

Using the same function in two different locations will only work for one instance

I have an AngularJS application where I am using a function called foo(bar) that takes bar as a parameter. The data for bar is retrieved from a web API, and I loop through this data using ng-repeat which works perfectly fine. <li class="list-group-item ...

javascriptangularjsangular-promise

What is causing my for/in loop to return null results, while the regular for loop works perfectly fine? (VISUALS included)

My goal is to iterate through an array of objects using a for/in loop in order to log specific properties of each object to the Chrome dev console. However, I am encountering issues as I keep getting null values. As a workaround, I attempted to use a regul ...

javascriptvue.js

Javascript onclick events failing to toggle video play/pause functionality

In my website, I have background music and a background video (webm format) embedded. I am facing an issue with making play/pause buttons in the form of png images work for both the video and the music. The background music is added using the embed tag wi ...

javascriptjqueryhtmlcss

Uncertainty regarding the integration process of `create-react-app --template typescript` with typescript-eslint

After creating a react project using npx create-react-app my-app --template typescript, I was surprised to find that typescript-eslint was already enabled by default. https://i.sstatic.net/1uijf.png Upon inspecting the eslint config within the package.jso ...

reactjstypescripteslinttypescript-eslint

The art of posting with ExpressJS

I'm encountering a problem where the data submitted through a form to my POST route is not getting passed on to a database document, even though the redirection works fine. I'm unsure of how to troubleshoot this issue. blogpost-create.ejs &l ...

javascriptnode.jsmongodbexpress