Is it possible to choose a range in ion2-calendar starting from the day after tomorrow and spanning three months ahead?

Currently, I have set up an ion-calendar utilizing the ion2-calendar plugin. The calendar is configured to disable dates prior to today's date. However, my goal is to also disable "today" and display available dates starting from tomorrow. Additionally, I only want the end date to be selectable within 3 months of the start date.

I attempted using [optionsRange] with 'from: new Date();' but this sets it as today's date. The [optionsRange] does work if I manually input the specific date values, but I am looking for a dynamic solution. https://www.npmjs.com/package/ion2-calendar

HTML CODE:

<ion-calendar [(ngModel)]="startDate" 
              [format]="'YYYY-MM-DD'"
              [options]="optionsRange">
</ion-calendar>

TS FILE CODE:

optionsRange: CalendarComponentOptions = {
        color: "primary",
        from: new Date() + 1,
              to: new Date() + 90
};

An error is thrown because the method cannot handle the '+' operator with a number.

My desired outcome is for from: ( Tomorrow's DATE ) and to: ( 3 months from the start Date ).

angulartypescriptionic-frameworkionic4

Answer №1

Check out the following code snippet:

<ion-calendar [(ngModel)]="this.dateRange"
              (onChange)="onChange($event)"
              [options]="option"
              type="string"
              format="YYYY-MM-DD">
</ion-calendar>

.ts 

 dateRange: {
    from: Date;
    to: Date
  } = {
    from:  new Date(Date.now() + 24 * 60 * 60 * 1000 *2),
    to: new Date(Date.now() + 24 * 60 * 60 * 1000 * 90)
  };

  option: CalendarModalOptions = {
    pickMode: 'range',
    title: 'RANGE',
    defaultDateRange: this.dateRange
  };


onChange($event) {
    console.log($event)
  }

Answer №2

Here is the TS and HTML code snippet for implementing Ionic 4 calendar functionality:

TS File

import { CalendarComponentOptions, DayConfig , CalendarModal, CalendarModalOptions} from 'ion2-calendar';
export class CalenderPage implements OnInit {
test: DayConfig[]=[];
public optionsRange: CalendarComponentOptions = {
  //from: new Date(2019, 0, 1),
  from: new Date(2019, 11, 1),
  to: new Date(2020, 2, 15),
  pickMode: 'range',
  daysConfig: this.test
};

constructor(
    public datepipe: DatePipe,
  ) {
   //disable next date from today and previous date from one month after
      var now = new Date();
      this.optionsRange.from = new Date(now.getFullYear(), now.getMonth(), now.getDate()-30);
      this.optionsRange.to = new Date(now.getFullYear(), now.getMonth(), now.getDate());
}
}

HTML Code

<ion-calendar [(ngModel)]="dateRange" [readonly]="false" [options]="optionsRange" (change)="onChange($event, 2)" [type]="type" [format]="'YYYY-MM-DD'" >
</ion-calendar>

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

What is the best way to save an array of objects from an Axios response into a React State using TypeScript?

Apologies in advance, as I am working on a professional project and cannot provide specific details. Therefore, I need to describe the situation without revealing actual terms. I am making a GET request to an API that responds in the following format: [0: ...

reactjstypescriptaxios

Assign Monday as the selected day of the week in the MUI Datepicker 6

I am currently using version 6 of the material ui Datepicker and I am trying to configure it so that the week starts on Monday. import React from "react"; import { DatePicker as DatePickerDestop } from "@mui/x-date-pickers/DatePicker"; ...

javascriptreactjsangularmaterial-uimui-x-date-picker

the Sprite fails to appear on the screen

Can you help me figure out how to fix the issue I'm having with loading images in this component? Currently, when I refresh the page, the image does not load properly and appears resized to 1 pixel width. Should I wait for the image to fully load befo ...

angulartypescriptpixi.js

Store Angular 17 control flow in a variable for easy access and manipulation

Many of us are familiar with the trick of "storing the conditional variable in a variable" using *ngIf="assertType(item) as renamedItem" to assign a type to a variable. This technique has always been quite useful for me, as shown in this example: <ng-t ...

angulartypescript

Ngrx: When using CatchError, it does not trigger a dispatch of an action

Dealing with catchError in the latest version of ngrx. effect$ = createEffect(() => this.actions$.pipe( ofType(contactAction), switchMap(({ data }) => this.postService.contact(data).pipe( map(() =& ...

angularactionngrxeffects

Displayed even when data is present, the PrimeNg empty message persists

I have set up a PrimeNg table to display data with an empty message template like this: <ng-template pTemplate="emptymessage"> <tr> <td> No records found </td> </tr> </ng-template> ...

angulartypescriptprimeng

Quickest method for sorting an array of objects based on the property of another object's array

Within my code, I have two arrays of objects, both containing a "columnId" property. My goal is to rearrange the first array to match the order of the second. I attempted the following method: filtered = visibleColumns.filter(function(v) { re ...

javascriptarraystypescript

What is the process for incorporating a custom type into Next.js's NextApiRequest object?

I have implemented a middleware to verify JWT tokens for API requests in Next.js. The middleware is written in TypeScript, but I encountered a type error. Below is my code snippet: import { verifyJwtToken } from "../utils/verifyJwtToken.js"; imp ...

javascripttypescriptauthenticationnext.jsmiddleware

Obtaining information from an API using Angular

I am currently working on extracting data from various API's and I am encountering some difficulties. The initial part is functioning correctly, with the code provided below : ngOnInit(): void { this.http.get('http://.../api/getData?table=ge ...

angularapicomponents

Unable to locate the name 'JSON' in the typescript file

I have been working on an angular application where I have implemented JSON conversion functionalities such as JSON.stringify and JSON.parse. However, I encountered an error stating 'Cannot find name 'JSON''. Furthermore, there is anoth ...

jsonangulartypescript

What is the best way to keep an item from list A after it has been moved to list B using PrimeNg's drag and drop feature?

I am facing an issue with the drag and drop feature in PrimeNg. I have a container that contains both a table and an unordered list. My goal is to be able to drag an element from the unordered list and drop it into the table, while still retaining the drag ...

angularprimeng

Determine the data type of an object's key

I have a XInterface defined as: export interface XInterface { foo: (() => Foo[]) | Foo[], bar: string, baz: number } When declaring an object using this interface, I want the type of foo to be Foo[], like so: const myObj: XInterface = { ...

javascripttypescript

I am working on two Angular projects and I am looking to integrate one of them into the other project

In my development work, I am juggling two Angular projects on Github: AngularApp1 and AngularApp2. AngularApp1 is a robust project with many components, while AngularApp2 serves a more specific purpose. My goal is to have a button in AngularApp1 that open ...

angulargitgit-submodules

Dependencies for Angular2 Material components on npm

I currently have the following dependencies listed in my package.json for npm to locate and install. "@angular/material": "2.0.0-beta.1" "angular-material": "^1.1.1" If I want to utilize the most up-to-date versions, what exactly should I specify? I am s ...

angularnpmangular-materialangular2-directives

Ensure the JSON file aligns with the TypeScript Interface

I am working with a config.json file. { "profiler": { "port": 8001, "profilerCache": { "allowedOriginsRegex": ["^http:\/\/localhost:8080$", "i"] } }, "database": { "uri": "mongodb+srv://...", "dbName": "profiler", ...

jsontypescript

Can an @Input value be transmitted to the app.component in Angular 2?

As I work on my Angular 2 app using ASP.Net for rendering, I find myself facing a challenge when trying to pass initialization data from RAZOR into my bootstrapped component. Despite setting up the _Layout.cshtml as the only RAZOR page, the data transfer d ...

angular

Issues with code functionality following subscription via a POST request

I'm currently facing an issue with a service that utilizes an HTTP post request to communicate with the database. Unfortunately, when I try to implement this in my .ts file, nothing seems to happen after subscribing to the post. The post itself works ...

angularionic-framework

After migrating from Angular 11 to Angular 12, I am facing issues with compiling my project using optimization parameters

Recently, I upgraded an environment using nrwl from angular version 11 to 12 including two angular applications and multiple libraries. Upon updating, I encountered an issue when trying to compile with optimization settings: angular.json { .... "op ...

angularnrwl-nx

The Angular7 counterpart of the C# attribute decorator

I'm working with an API method that has an Authorize attribute to verify permissions. [Authorize(ReadIndexes)] public async Task<IActionResult> GetIndexes () { ... } Is there a similar way in Angular to implement permission checks so the API ...

javascriptc#angulartypescriptecmascript-6

leveraging an npm package within an Angular 2 component

I'm facing some challenges trying to use an npm package called 'ip' in my Angular 4 component. The package can be found at https://www.npmjs.com/package/ip To add the package, I've executed the following commands: npm install ip --save ...

angularnpmpackage