How can I prevent users from selecting a date earlier than the start month in angular's date picker or make it

I am looking to implement a feature where the user cannot select or edit the start date for the first two months after the initial start date. If any month is selected other than those two, then I want to calculate the date with an additional 2 months added.

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

I also want to restrict the user from selecting the immediate 2 months following the start month.

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

If September is selected, I would like to calculate the start date up to the selected date.

https://i.sstatic.net/7zOrJ.png

In the component.ts file:

@Component({
  selector: 'app-tax-time-period',
  templateUrl: './tax-time-period.component.html',
  styleUrls: ['./tax-time-period.component.scss'],
})
export class TaxTimePeriodComponent implements OnInit {
  endDateDisable = true;
  defaultPickerValue: Date | null = null;
  @ViewChild('endDatePicker') endDatePicker!: NzDatePickerComponent;

  startDate!: Date;      
disabledEndDate = (endDate: Date): boolean => {
        if (!endDate || !this.startDate) {
          return false;
        }
        return endDate.getTime() < this.startDate.getTime() ;
      }
}

The HTML code:

<nz-form-item>
  <nz-form-label>Start Date</nz-form-label>
  <nz-form-control>
    {{ startDate ? (startDate | date: "YYYY-MM-dd") : "N/A" }}
  </nz-form-control>
</nz-form-item>

<nz-form-item>
  <nz-form-label nzRequired> End Date</nz-form-label>
  <nz-form-control
    [nzSpan]="5"
    nzHasFeedback
    [nzErrorTip]="endDateErrorTpl"
  >
    <nz-month-picker
      #endDatePicker
      [nzDisabledDate]="disabledEndDate"
      nzFormat="yyyy-MM-dd"
      formControlName="endDate"
      nzPlaceHolder="End"
      (nzOnOpenChange)="handleEndOpenChange($event)"
      nzMode="month"
      [nzDisabled]="endDateDisable"
      [nzDefaultPickerValue]="defaultPickerValue"
    ></nz-month-picker>
javascriptangularjsangulartypescriptangular-directive

Answer №1

@Component({
  selector: 'app-tax-time-period',
  templateUrl: './tax-time-period.component.html',
  styleUrls: ['./tax-time-period.component.scss'],
})
export class TaxTimePeriodComponent implements OnInit {
  endDateDisable = true;
  defaultPickerValue: Date | null = null;
  @ViewChild('endDatePicker') endDatePicker!: NzDatePickerComponent;

  startDate!: Date;      
disabledEndDate = (endDate: Date): boolean => {
        if (!endDate || !this.startDate) {
          return false;
        }
    if (endDate.getMonth() === 0) {
      return true;
    }
    if (endDate.getMonth() === 1) {
      return true;
    }
    if (endDate.getMonth() === 3) {
      return true;
    }
    if (endDate.getMonth() === 4) {
      return true;
    }
    if (endDate.getMonth() === 6) {
      return true;
    }
    if (endDate.getMonth() === 7) {
      return true;
    }
    if (endDate.getMonth() === 9) {
      return true;
    }
    if (endDate.getMonth() === 10) {
      return true;
    }
        return endDate.getTime() < this.startDate.getTime() ;
      }
}

If I implement it in this manner, my issue will be resolved because the getMonth() function returns an array of values. By making the array index true, I can effectively address my problem.

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

Calculate the total amount based on the selected value from the radio button

For example, radiobutton A = value X, radiobutton B = value Y. Below is the code snippet I am utilizing: Javascript file: <script type="text/javascript" $(document).ready(function () { $("div[data-role='footer']").prepend(' ...

javascriptjqueryjquery-selectorsjquery-events

The line numbers are displayed in an unconventional manner next to the textarea

Creating a new text editing tool, here is the code snippet:- const editor = document.querySelector('#ta'); const lc = document.querySelector('#line-count'); var lcDiv = document.createElement('p'); // Function to calculate ...

javascripthtmltextarea

Reactjs is experiencing issues with the data mapping function

Currently, I am developing with Reactjs and utilizing the nextjs framework. In my current project, I am working on fetching data from a specific URL (https://dummyjson.com/products) using the map function. However, I encountered an error message: TypeError ...

javascriptreactjsnext.js

How to properly structure an array in JSON format for utilizing in the Google Charts API?

Noticed that integer values need to be integers in the json, however I am using strings. The original array structure is as follows: '[{"sctr":"Asset Managers","amount":"1586500"},{"sctr":"Auto Parts","amount":"1618000"},{"sctr":"Business Su ...

javascriptphparraysjsongoogle-visualization

Utilizing TypeScript to match a data object's type field to corresponding React Components

Our content is organized in a (tree) structure of nodes, each with its own type type NodeType = "text" | "image"; interface Node<T extends NodeType> { type: T; } To simplify things, let's say the content we receive is not ...

reactjstypescript

Strategies for Increasing Index Values in JavaScript

I attempted to modify the data attribute in my code snippet below. After clicking on the square, the data attribute should be incremented. However, it appears that the incrementing is not happening as expected. How can I resolve this issue? Additionall ...

javascripthtmljquerycss

Handling responses from http requests in Node.js

Below is the code snippet I am working with: exports.post = function(request, response) { var httpRequest = require('request'); var uri = "url.."; httpRequest(uri, function(err, responseHeaders, bodyResponse) { var data = JSON.parse( ...

javascriptajaxnode.jshttprequest

Using the set() method in Firestore with the merge option does not function properly when implemented in Node.js

const user = {name : myUsername}; databaseRef.set(user, { merge: true }); An error is occurring which states: Invalid use of type "undefined" as a Firestore argument. Despite following the Firebase documentation here, and seeing others use it in online ...

javascriptnode.jsfirebasenpmgoogle-cloud-firestore

apply jQuery to add a class to the parent element when clicked

I am currently facing an issue with my code. It was working fine in jsFiddle, however, when I try to use it outside of fiddle, I am getting errors and it's not working properly. $('.down-photo').click(function() { $(this).parent(&apos ...

javascriptjqueryhtmlcss

When trying to pass props into setup using VueJS 3 Composition API and TypeScript, an error may occur stating: "Property 'user' does not exist on type"

I need help figuring out why TypeScript is not recognizing that props.user is of type UserInterface. Any advice or guidance would be greatly appreciated. You can reach me at [email protected], [email protected], [email protected]. This seem ...

typescriptvue.jsvuejs3quasar-frameworkvue-composition-api

Can you explain the error message 'Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser' in the IntelliJ IDEs family?

Whenever I open a .vue file in IntelliJ IDEA, I encounter the following error: Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. The file does not match your project config: XX\XX\CurrentFile.vue. The fi ...

typescriptvue.jsintellij-ideaeslint

Trouble with the display none function

I am trying to achieve the following: If my shopping cart is empty, I want another div to display over the top of it. Instead of seeing the cart, users should see a message saying 'your cart is empty'. Currently, I have set the other div to dis ...

javascriptcss

Using Vue to dynamically wrap a component with a tag

Have you ever wondered how the v-if directive in Vue.js can hide an entire component along with its content based on a condition? I am curious to know: Is it possible to only hide the surrounding tag or component without removing its contents? ...

javascriptvue.js

Leveraging JS Variables within Twig Template

I am trying to incorporate a JavaScript variable into Twig. Despite attempting to implement the solution mentioned here, my code below does not render the map properly. If I remove the part between "var polylineCoordinates" and "polyline.setMap(map);", th ...

javascriptsymfonygoogle-maps-api-3twig

What is the technique for retrieving the data-id value and transferring it to a different page with jQuery's post method?

Here is the code I'm working on: <a href="#view_contact" class="btn btn-info btn-xs view" data-id="<=$row['ADMINISTRATOR_ID'];?>" data-toggle="modal">View</a> I'm trying to fetch the value of data-id and pass it to a ...

javascriptphpjquerypost

Using the pipe operator in RXJS to transform an Event into a KeyboardEvent

I'm encountering an error when trying to add a keydown event and convert the parameter type from Event to KeyboardEvent as shown below. fromEvent(document, "keydown") .pipe<KeyboardEvent, KeyboardEvent>( filter((event) => even ...

angulartypescriptrxjs

Determine the data types present in an array using TypeScript

It appears that Typescript has a strong compatibility with AST. When checking x.type == "Abc", Typescript is able to infer that x is of type Abc. This capability comes in handy when I use it for typechecking JS files with JSDOC format annotations, and I be ...

typescriptabstract-syntax-tree

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

How to run JavaScript code in Robot Framework using Selenium2Library

I am currently conducting automated testing on a web application based on extjs using robotframework and selenium2library. However, I'm facing difficulty in locating certain elements within a table component. I have come across the Execute JavaScript ...

javascriptextjsseleniumrobotframework

The breeze is puzzled by the altered being, unable to identify it

I am currently working on a breeze implementation that involves displaying properties from a location object on the UI. However, when I make changes to some properties and attempt to save them, breeze does not recognize the entity as being changed. Here is ...

javascriptentitybreezesavechanges