Implementing event triggers when setting a value for a date picker in Angular Kendo Date Picker

In my Angular form, I have two date pickers for selecting a start date and an end date. I need to ensure that the minimum value for the end date is set as the start date. To achieve this, I created a method that updates the min value of the end date whenever the start date changes. However, when I open the form in edit mode and populate the data, I encounter a validation error because the previously assigned [min] value still exists in the this.min variable. I need to reset it before setting the new min value based on the start date. How can I accomplish this?

   <kendo-datepicker 
        formControlName="startDate" placeholder="Start Date" [format]="'MM/dd/yyyy'" (valueChange)=selectedStartDate() required>
   </kendo-datepicker>

   <kendo-datepicker 
        formControlName="endDate" placeholder="END Date" [format]="'MM/dd/yyyy'" [min] = "min" required>
   </kendo-datepicker>

app.component.ts

    min:Date;
    public selectedStartDate(){
        const formModel = this.specialDayFormGroup.value;
         if (formModel.startDate) {
          this.min = new Date(formModel.startDate);
        }
    }

Answer №1

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
            <kendo-datepicker
                [min]="minimum"
                [max]="maximum"
                [(ngModel)]="selectedValue"
                #datePicker="ngModel"
                (valueChange)=onSelectStartDate()
            ></kendo-datepicker>

            <kendo-datepicker
                [min]="minimum2"
                [(ngModel)]="selectedValue2"
                #datePicker="ngModel"
            ></kendo-datepicker>
    `
})
export class AppComponent {
    public minimum: Date = new Date(2020, 4, 10);
    public maximum: Date = new Date(2020, 9, 10);
    public selectedValue: Date = new Date(2020, 4, 10);    
    
    public minimum2: Date = new Date(2020, 4, 10);
    public selectedValue2: Date = new Date(2020, 4, 10);

    public onSelectStartDate(){
      this.minimum2 = this.selectedValue;
    }
}

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

Creating an array object in TypeScript is a straightforward process

Working on an Angular 4 project, I am attempting to declare an attribute in a component class that is an object containing multiple arrays, structured like this: history: { Movies: Array<Media>, Images: Array<Media>, Music: Array<Medi ...

What causes the error message "No exported member 'ɵɵFactoryDeclaration' in @angular/core/core" to appear during project compilation?

I am facing an issue where the global Angular CLI version is 13.0.1 and the local version in my project is 10.2.3. Despite making changes to some components (without touching package.json), I encountered an error during the build step of my bitbucket pipel ...

Issue with Angular Material Mat Horizontal Stepper: Incorrect step selection when progressing with next button

I have a horizontal mat stepper that needs to be controlled using Next and Back buttons. The steps are generated using ngFor. I have created a variable called "stepIndex" which is bound to the "selectedIndex" input. The Next button should increment this va ...

Is there a way for me to obtain output from a different Angular component?

After watching an Angular tutorial and following the steps, I am facing difficulties with the @Output feature. I am unable to receive values from another component in my home component. I attempted to use Output with EventEmitter but for some reason, it i ...

What is a more efficient way to optimize the repeating 'for-of' loop?

I am faced with the following code challenge: runA() { const request = []; for (const item of this.items ) { request.push(this.getRequestData(item.prop1)); // want to generalize that } return forkJoin(...request).pipe(x => x); ...

Struggling to find a solution for your operating system issue?

We are currently attempting to utilize the markdown-yaml-metadata-parser package for our project. You can find more information about the package here. Within the package, it imports 'os' using the following syntax: const os = require('os ...

Is it possible to utilize BehaviourSubject across different modules in Angular?

I am looking to utilize the BehaviourSubject for sharing data between two components that belong to different modules. How can I achieve this goal? CurrenciesModule export class CurrenciesComponent implements OnInit { defaultCurrency: CurrencyModel; ...

The directive's @Output will display information in the parent component, but it is unable to directly modify a value within

index.component.html <div draggable (drag)="handleDrag($event)">{{draggingValue}}</div> index.component.ts handleDrag(event) { console.log('handleDrag :', event); // works fine this.draggingValue = event; // not updating ...

Navigating through Dynamic URL Parameters with RouterLink in an Angular Application

Within my Angular 2 application, there exists a tab section where users can choose from a collection of separate yet contextually connected components. By clicking on one of these links, the corresponding component is loaded based on the routerLink definit ...

Changing the names of properties within a intricate JSON structure

I have a JSON data structure that is quite complex, like the one shown below: const json = '{"desc":"zzz", "details": { "id": 1, "name": "abc", "categoryDetails": { "cid": ...

Currently attempting to ensure the type safety of my bespoke event system within UnityTiny

Currently, I am developing an event system within Unity Tiny as the built-in framework's functionality is quite limited. While I have managed to get it up and running, I now aim to enhance its user-friendliness for my team members. In this endeavor, I ...

Update ngx-datatable when the user clicks on a different directive

My issue involves a Side Navigation with a docking feature and a data table in the Main View. When I undock the side navigation, the data table does not recalculate automatically, leaving empty space where the Side Navigation was. This requires me to manua ...

Manually initiating event broadcasts in Angular 5

After researching, I discovered a solution for implementing $broadcast and $on in Angular 5. It involves creating a custom service called broadcaster. I have two parallel components that need to listen for change events triggered by the parent component. ...

Nested formArrays within formArrays in Angular 4

I've been working on implementing a FormArray inside another FormArray, but it doesn't seem to be functioning correctly. I also tried the solution provided in the link below, but it didn't work for me. How to get FormArrayName when the Form ...

When the page is first loaded, the select options dropdown using NgFor and NgValue does not display the initial object from the list

I am facing an issue with a select options dropdown that contains a list of objects. I have used ngValue to set the value of the dropdown as an object. However, upon page load, the dropdown does not display the first object from the list; it only shows obj ...

The Typescript counterpart to PropTypes.oneOf, utilizing a pre-existing variable

While I know this question has been addressed on Stack Overflow here, I still find myself struggling with a similar issue in my TypeScript project. Currently, I am in the process of converting a JavaScript project to Typescript. Within one of my React com ...

What is the proper way to utilize this xd-file package?

I'm currently working on manipulating an Adobe XD file using a specific package. If you're interested, here's the link to the package: xd-file My goal is to incorporate this code snippet into a JavaScript file, utilizing Node.js. The meth ...

Generate a Datastore query using JavaScript

I am struggling to create a datastore query with a filter, as I keep encountering a 500 error code. While I have successfully developed save and get modules, this particular query is causing issues for me. Any help or suggestions on how to narrow down and ...

What are some strategies for leveraging DynamicModule.withComponents from ng-dynamic-component without creating dependencies for the associated components?

In my project, I have 3 modules each containing a component: tasks >tasks -tasks.component.ts|html|css -tasks.module.ts people >people -people.component.ts|html|css -people.module.ts dynamic-container >dynamic-container -d ...