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

Angular2 and the Use of Environment Variables

I am working on an angular 2/4 app with a node server.js to serve it. I need to access an environment variable for switching between backend endpoints (using localhost for dev and another endpoint for prod). Both the frontend and backend apps are destined ...

node.jsangularenvironment-variables

Modify typescript prior to typechecking

Consider the following TypeScript file: class A { private x? = 0; private y? = 0; f() { console.log(this.x, this.y); delete this.x; } } const a = new A(); a.f(); When building it in webpack using awesome-typescript-loader ...

typescriptabstract-syntax-treetypescript-compiler-apiawesome-typescript-loader

Converting JS carousel to TS for showcasing multiple items

I am currently working on integrating a bootstrap carousel into my Angular project and I need to convert my JavaScript file to a TypeScript file. As someone who is new to this, I'm unsure of the process for converting and implementing it in a .ts file ...

javascriptangulartypescript

Step-by-step guide on deploying your Nestjs API on Google App Engine

Encountering a hurdle while trying to deploy my nestjs api on Google App Engine has left me puzzled. Despite initializing my google cloud project with the google sdk, an error thwarted my progress. To tackle this challenge, I made key adjustments in my cod ...

node.jstypescriptnpmnestjs

Concealing the sidebar in React with the help of Ant Design

I want to create a sidebar that can be hidden by clicking an icon in the navigation bar without using classes. Although I may be approaching this incorrectly, I prefer to keep it simple. The error message I encountered is: (property) collapsed: boolean ...

javascriptreactjstypescriptweb-applicationsantd

When the condition is false, Angular 8's ngIf creates an empty element

Encountering an issue with Angular8 and ngIf: I have a piece of code that generates a div element loading images and their associated details onto a webpage from a JSON file based on a condition: HTML Code: <div class="row" > < ...

htmlangularangular-ng-if

Executing unit tests in Angular - launch Chrome upon successful build completion (which may take a while)

There are instances where the Angular app takes longer than the default 2-minute timeout for Chrome started by Karma to capture the content. Is there a method to compel Karma to launch Chrome after the build is completed? In my package.json: { "depende ...

angularkarma-jasminekarma-runnerangular-testkarma-chrome-launcher

Is it possible for a conditional type in TypeScript to be based on its own value?

Is it possible to use this type in TypeScript? type Person = { who: string; } type Person = Person.who === "me" ? Person & Me : Person; ...

javascripttypescript

Why aren't special methods/mixins for Sequelize associations being generated?

According to the documentation available at https://sequelize.org/docs/v6/core-concepts/assocs/#special-methodsmixins-added-to-instances: When establishing an association between two models, special methods are introduced that enable instances of those mo ...

node.jstypescriptexpresssequelize.jssequelize-typescript

Can you provide information on the type signature of the `onChange` event for the MUI DatePicker?

I am utilizing an instance of the MUI DatePicker along with a MomentAdapter: import *, {useState} as React from 'react'; import TextField from '@mui/material/TextField'; import { AdapterMoment } from '@mui/x-date-pickers/AdapterMom ...

typescriptmaterial-uidatepicker

Nextjs doesn't render the default JSX for a boolean state on the server side

I am working on a basic nextjs page to display a Post. Everything is functioning smoothly and nextjs is rendering the entire page server side for optimal SEO performance. However, I have decided to introduce an edit mode using a boolean state: const PostPa ...

javascriptreactjstypescriptnext.js

Selecting a filter for an array of objects

I'm struggling to implement a search feature in my mat-select DropDown. The existing options I've found online aren't quite working for me due to the object array I am passing to the Dropdown. Any assistance or guidance on this matter would ...

htmlangulartypescript

Utilize multiple validators.patterns within a single value for enhanced data validation

I need to implement two different patterns for the formControlName='value' based on the type selected. If type is 'A', I want to use the valuePattern, and if type is 'B', I want to use the uname pattern. This is my HTML code: ...

angulartypescript

The React hook useState is struggling to accurately map array objects

Recently, I encountered an issue with a form that sends an array of objects to another React Functional Component: import React, { useState } from 'react' import uuid from 'uuid/v1'; const NewMovieForm = ( {addMovie }) => ...

reactjstypescriptreact-hooks

Crafting a dynamic HTML template in Angular using template literals and the *ngFor directive

I've been developing a toast component that accepts HTML tags as strings. This requires me to iterate through the errorMsgs array below and dynamically build a list. However, I'm currently facing an issue where the *ngFor loop inside it is iterat ...

angularecmascript-6

Unable to download files from Angular frontend connected to Spring backend, experiencing corruption or malfunction

I am facing an issue with downloading files (.odt) stored in a mysql database. Here is the code snippet for handling this operation in my project: Backend (using Spring, not Spring Boot): @RequestMapping(value = "/downloadRequest", method = Requ ...

angularspringlibreofficeopenoffice.org

Error: The object is not defined (evaluating '_$$_REQUIRE(_dependencyMap[32], "react-native-safe-area-context").SafeAreaView')

I am currently working on developing a chat application using react-native with the following dependencies: "dependencies": { "@react-native-async-storage/async-storage": "~1.17.3", "@react-native-community/masked ...

typescriptreact-nativereact-native-gifted-chat

Exploring the capabilities of supertest by testing endpoints in Express with NodeJS

Having trouble setting up a test environment to test my TypeScript Express Node.js endpoints. Here are the packages I've installed: jest ts-jest jest-junit supertest @types/supertest @types/jest This is how my spec file looks like: imp ...

node.jstypescriptexpressjestjssupertest

Can type information be incorporated during compilation?

Consider the code snippet below: function addProperties(keys: String[]): Object { // For illustration purposes, this is a specific return return { firstProperty: "first_value", secondProperty: "second_value" }; } export defaul ...

typescript

Intellisense for dispatch types in Redux Toolkit

After following the documentation for redux toolkit with typescript, I implemented my own useDispatch hook as shown below export const useAppDispatch = () => useDispatch<AppDispatch>() and used it in components like this const dispatch = useAppDi ...

reactjstypescriptreduxredux-toolkit