Angular is having trouble with disabled dates on the HTML5 Datepicker

I am encountering an issue with disabling past dates in a date-picker using HTML5. When I use the date-picker without any specific conditions, the disabled dates work as expected.

However, when I try to use the date-picker with conditions, it does not function properly. I attempted to append the current date to the "min" attribute of the date element using jQuery, but I know that using jQuery with Angular is considered bad practice. Unfortunately, I couldn't figure out how to access or append the attribute of the date element using form control typescript (e.g. formname.get('formcontrolName')).

I am hoping to find a solution where the date-picker will work correctly with the specified conditions.

Link to source code

https://i.sstatic.net/Ba58v.png

angulartypescriptdatepickerangular-reactive-forms

Answer №1

To link the datepicker's min attribute with a component's property, you can follow this example. Remember to assign the value to the property in the constructor as the ngAfterViewInit lifecycle hook might be too late:

Sample HTML Code

<input type="date" class="form-control" [min]="today" id="applyDate1" formControlName="applyDate1"/>

Sample TypeScript Code

export class AppComponent implements AfterViewInit {

  public personalForm: FormGroup;
  public today;

  constructor(private fb: FormBuilder) {
    const currentDate:Date = new Date();
    let dd:any = currentDate.getDate();
    let mm:any = currentDate.getMonth()+1;
    let yyyy:any = currentDate.getFullYear();

    if(dd<10) {
        dd = '0'+dd
    } 

    if(mm<10) {
        mm = '0'+mm
    } 

    this.today = yyyy + '-' + mm + '-' + dd;

    ...
  }

 ...

}

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

React website successfully completes builds and deployments, however upon viewing, it displays as a blank white screen

Hi there, I am a beginner in web development and decided to experiment with building a React site. Everything was working perfectly on my local machine, so I followed a tutorial to host it on GitHub. The deployment process seemed fine without any errors. H ...

reactjstypescripthosting

Angular Forms, mark a form as invalid if a p-select element retains its original value

I am looking to prevent the submit button from being enabled until a user makes changes in any of the form controls. The challenge I'm facing is that while required input fields are easy to handle, there is also a select control with three options. De ...

angularformsreactiveform-control

The module 'AppModule' raised an error due to an unexpected value being imported, specifically 'AngularFireDatabase'. For proper functionality, consider adding a @NgModule annotation

App.Module.ts import { AngularFireDatabase } from 'angularfire2/database'; imports: [ AngularFireDatabase ] I can't seem to figure out why it is requesting me to include a @NgModule annotation when I believe it is unnecessary. My ...

angularangularfire2

Obtain numerous variables from a .ts file and bring them into a separate file within Angular 4

I am interested in creating a config.ts file to store the global values of my app. I have been able to use it in this way: module.exports.key = "My key"; However, I need to export multiple values, around 20-30. Is there a more efficient way to do this wi ...

angularvariablesexport

Encountering an error when attempting to store a value in an array of custom types: "Unable to assign properties to undefined (setting 'id')"

My model looks like this: export class SelectedApplicationFeatures { id: number; } In my TypeScript file, I imported the model as shown below: import { SelectedApplicationFeatures } from "src/app/models/selectedApplicationFeatures.model"; selec ...

angulartypescriptmodelpropertiesundefined

Challenges with invoking functions within ngFor loop during unit testing in Angular 12

I am currently learning about unit testing and I am facing an issue with calling a function inside an *ngFor loop in an Angular 12 application. I have an observable that contains an array of objects and it is working correctly, iterating through the data p ...

angulartypescriptunit-testingjasmineangular-unit-test

What is the reason for the regeneration of the 2D array?

I have a method called generateWeights() that retrieves random values in an array; And a method named learn() that calls the changeWeights() method to alter the values in the array. Expected: Prior to invoking the learn() method, I anticipate receiving an ...

javascriptarraysangulartypescript

Properly relocating the node_modules folder: A step-by-step guide

I decided to relocate my node_modules folder to a different location. To do this, I deleted the original node_modules folder and moved the package.json file to the new desired location. After that, I executed the command npm install to install the node_mod ...

angularjsnode.jsangularnode-modules

Having difficulty importing SVG files in TypeScript

When working with TypeScript (*.tsx) files, I encountered an issue where I couldn't import an SVG file using the following statement: import logo from './logo.svg'; The transpiler gave me this error message: [ts] cannot find module '. ...

typescriptsvg

Steps to define attributes within an Angular constructor for successful resolution

I am currently facing an issue with the "Can't resolve all parameters..." error when adding properties to my constructor. It seems to be a recurring problem for me, indicating that I may have a foundational misunderstanding of how this process operate ...

angulardependency-injectionangular-components

I'm working with Angular 12, Bootstrap 5, and ngPrime, and I'm looking to overlap a p-dialog with another element in my project

Is there a way in Angular 12 with Bootstrap 5 using ngPrime to overlap a p-dialog over any other element without using z-index and CSS, solely relying on PrimeNG? I have tried using z-index with: .my-class{ z-index: 2147483647 !important; } However, ...

cssangularmodal-dialogprimengz-index

What are the best practices for sharing context in express and typescript?

Implementing a solution to expose a value to all request handlers using express and typescript is my goal. I am looking for a way to easily "inject" this value from a middleware or an alternative method that allows for simple mocking if needed. Here is th ...

javascriptnode.jstypescriptexpressdependency-injection

Tips for integrating Typescript Definition files with Visual Studio 2017

I have a challenge with my ASP.NET Core 2.0 application where I am attempting to incorporate TypeScript and jQuery. While TypeScript integration has been successful, I am facing issues with jQuery as it does not provide me with intellisense. Despite trying ...

typescriptvisual-studio-2017intellisense

Is there a way for me to generate an Nx command that can dynamically create a library with a specified name?

In the world of Nx and Angular, I have a repository named org housing all my projects. To create a special library within this setup, like one called auth, I typically use a command that looks like this: npx nx g @nx/angular:lib auth-data-access --directo ...

angularnrwl-nx

Encountered an issue when attempting to include the "for" attribute to a label within an angular 2.0 template

I am currently using Angular 2.0 framework and working on developing an input component. In addition to that, I am also utilizing Google MDL which requires a specific HTML structure with labels for inputs. However, when trying to implement this, I encounte ...

angulartypescript

The orderBy filter seems to be malfunctioning

I'm utilizing ngx-pipes from this webpage: https://www.npmjs.com/package/ngx-pipes#orderby Specifically, I am using the orderBy pipe. However, when I implement the orderBy pipe in my HTML, the information is not being ordered correctly (from minor t ...

htmlangulartypescriptpipeionic4

Send concealed, pre-filled array as an argument in the http.get request upon submission in Angular 6

After successfully testing my API in Postman and using developer tools response, I am encountering an issue with the values returned by the API. Language used: c# public async Task<IHttpActionResult> GetUsersAcccountContract(string username) { ...

angularangular6

Validating data in rows of a table using Angular 2

One of the challenges I'm facing is figuring out how to properly validate controls that are contained within a table row. Here's an example of the HTML code: <tr *ngFor="let items of myList"> <input class="form-control" [ngModel]="item. ...

angular

A TypeScript method for accessing deeply nested properties within an object

I'm currently working on a function that utilizes typings to extract values from a nested object. With the help of this post, I managed to set up the typing for two levels successfully. However, when I introduce a third (known) level between the exis ...

javascripttypescript

Issue with Typescript not recognizing default properties on components

Can someone help me troubleshoot the issue I'm encountering in this code snippet: export type PackageLanguage = "de" | "en"; export interface ICookieConsentProps { language?: PackageLanguage ; } function CookieConsent({ langua ...

javascriptreactjstypescriptreact-props