"Learn how to automatically limit date selection to a maximum of 3 days after choosing a date with the nb-rangepicker rangep

I have successfully implemented the nebular date range picker to filter data. However, I am facing an issue with setting the default maxDate 3 days after selecting the input. I have tried multiple methods but none have worked for me. Below is my TypeScript code:

  
import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { NbDateService } from '@nebular/theme';

@Component({
  selector: 'nb-datepicker-showcase',
  template: `
    <nb-card size="large">
      <nb-card-body>
        <input nbInput placeholder="Pick Date" [nbDatepicker]="formpicker">
        <nb-rangepicker #formpicker></nb-rangepicker>
      </nb-card-body>
    </nb-card>
  `,
  styleUrls: ['./datepicker-example.scss'],
})
export class DatepickerShowcaseComponent {
min: Date;
max: Date;
constructor(protected dateService: NbDateService<Date>) {
this.min = this.dateService.addDay(this.dateService.today(), -2);
this.max = this.dateService.addDay(this.dateService.today(), 2);
}
}

Additionally, I attempted to use the min/max date properties but was unsuccessful. Here is the code snippet:

<input nbInput placeholder="Pick Date" [nbDatepicker]="picker">
<nb-rangepicker #picker [min]="min" [max]="max"></nb-rangepicker>

Answer №1

To update your date objects, simply add an event listener for the (rangeChange) event on the nb-rangepicker element

<nb-rangepicker (rangeChange)="updateDates($event)" #datePicker></nb-rangepicker>

Answer №2

Make sure to set the maximum date in your controller.

maxDate: Date = new Date();
maxDate.setDate(new Date(this.minDate).getDate() + 2);

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 are the advantages of utilizing NGRX over constructor-injected services?

Have you ever wondered about the benefits of using NGRX or NGXS for an Angular application instead of constructor injected services to manage component IO? Is it simply to prevent mutation of component properties references without replacing the entire pr ...

What does the error "Cannot access property 'length' of null when using 'angular'" mean?

I am currently working on counting the initial li items and encountering an issue with 'Cannot read property 'length' of null' after fetching data from the server using a unit test case. Here is my code: import { ComponentFixture, Tes ...

Configuring Google Maps API (including charts) for maximum height of 100%

I am having trouble getting my map to display at 100% height using the Google Maps API. I've encountered similar issues in the past with the Google Charts API as well. From what I've gathered, it seems like setting the height of the html and bod ...

What are the potential issues with my validation function specifically designed for the select element?

After 3 years of working with JavaScript, I found myself unable to use simple validator libraries. So, I made the decision to create my own. This validator works by adding the attribute jmust to all inputs, select elements, textareas, etc. (I haven't ...

Using Typescript with Vue.js: Defining string array type for @Prop

How can I properly set the type attribute of the @Prop decorator to be Array<string>? Is it feasible? I can only seem to set it as Array without including string as shown below: <script lang="ts"> import { Component, Prop, Vue } from ...

What is the top choice for creating a shallow copy of an array

While delving into the vue source code today, I stumbled upon a method of writing that left me puzzled. view source const deduped = [...new Set(pendingPostFlushCbs)] My initial thought is that it is a shallow copy of the array. But why is there a need t ...

Unable to fetch packages from npm or github using jspm install because of proxy configuration restrictions

I'm attempting to execute a basic Angular 2 unit test application. I have cloned the following git repository and followed the steps provided in the readme file: https://github.com/matthewharwood/Hit-the-gym I have configured proxy settings for npm, ...

What is the process for deactivating a range of dates?

I am trying to prevent users from selecting dates within the range specified by l1 and l2. However, my current method only disables the date 13. var l1 = new Date("2019-07-13"); var l2 = new Date("2019-07-30"); this.flag = 0; this.filter2 = function( ...

How can I retrieve information from PHP using json_encode and access it in JavaScript?

Currently in the process of developing a web app using Phonegap and XUI. Fetching data from an external domain through an http request with XUI. The retrieval process is successful, as I am able to receive JSON data in the following format: ({"first":"J ...

Using Javascript, access the 'second child' element by referencing the 'first child' element within a shared 'parent element'

// Retrieve the child_2 element using core javascript let parent = document.querySelector('.child_1').closest('.parent'); let child_2 = parent.querySelector('.child_2'); How can I achieve the same functionality as the jQuery ...

How can the return type of a function that uses implicit return type resolution in Typescript be displayed using "console.log"?

When examining a function, such as the one below, my curiosity drives me to discover its return type for educational purposes. function exampleFunction(x:number){ if(x < 10){ return x; } return null } ...

Exporting Canvas data without the alpha channel

I am looking for a way to resize images that are uploaded in the browser. Currently, I am utilizing canvas to draw the image and then resize it using the result from the toDataURL method. A simplified version of the code (without the upload section) looks ...

Switching between API requests through a live feed

Hey there: import Rx from 'rxjs'; function mockApi(endpoint, time, response) { return new Rx.Observable(observer => { console.log(`${endpoint}: Request initiated.`) let active = true; const id = setTimeout(() => { cons ...

Error encountered due to an unhandled promise rejection of type

I am currently using async/await to execute a query to the database and receive the result. However, I encountered an error in the browser console that says: Unhandled promise rejection TypeError: "games is undefined" In my code, there are two function ...

Error: The code is trying to access the property 'string' of an undefined variable. To fix this issue, make sure to

I encountered an issue after installing the https://github.com/yuanyan/boron library. The error message I received is: TypeError: Cannot read property 'string' of undefined Error details: push../node_modules/boron/modalFactory.js.module.expor ...

Error message thrown on the login page: "Attempting to access property 'push' of an undefined object"

I'm currently working on a login page using JWT and I'm facing an issue with trying to redirect the user to the home page after successful login. I am using this.props.history.push("/") for redirection but I keep getting an error: TypeError: Cann ...

What are the best methods for concealing a ng-repeat element with AngularJS?

.controller('CouponsCtrl', ['$scope', '$http', '$window', '$location', '$ionicPopup','$ionicLoading', function($scope, $http, $window, $location, $ionicPopup,$ionicLoading) { ...

Message display showing an "[object Object]" (Node Express Passport)

Having an issue with my passport.js implementation where the flash message is not showing up when the username or password is incorrect. The logic was working fine before, but now it's broken even after copying the working version step by step. Flash ...

An issue occurred during compilation with 1 error: The required dependency could not be located

Encountering an issue in a Vue component while attempting to import another JavaScript file located in the services/AuthenticationService directory. Error message: Module not found: Error: Can't resolve '@/services/AuthenticationService'. ...

typescript: define the type of an object that behaves like a map

My current approach involves utilizing an object to store a map, where keys are strings and values are of a fixed type T. Upon looking up a key in the object, the type inference automatically assigns it the type T. However, there is a possibility that it ...