Prevent selection of weekends on mat-date-range in Angular

Is there a way to disable weekends on a calendar using date range? I've tried but can't seem to get it to work. Any suggestions?

The Issue

 Can't bind to 'matDatepickerFilter' since it isn't a known property of 
'input'.

#ts code

 weekendsDatesFilter = (d: Date): boolean => {
    const day = d.getDay();

    /* Prevent Saturday and Sunday for select. */
    return day !== 0 && day !== 6 ;
}

#html code

<mat-form-field appearance="fill" >
                                                <mat-label>
                                                    SELECT DATES
                                                </mat-label>
                                                <mat-date-range-input [min]="currentDate" [rangePicker]="picker">
                                                    <input  [matDatepickerFilter]="weekendsDatesFilter" matStartDate [(ngModel)]="model.proposedDateStart" placeholder="Start Date" required >
                                                    <input  [matDatepickerFilter]="weekendsDatesFilter" matEndDate [(ngModel)]="dateEnd" placeholder="End Date" required>
                                                </mat-date-range-input>
                                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                                                <mat-date-range-picker #picker></mat-date-range-picker>

                                            </mat-form-field>

Answer №1

Visit this link for more information on MatDateRangeInput

This function is designed to eliminate dates within the date range picker.

@Input()
dateFilter: DateFilterFn<D>

Implementing a callback function to disable specific dates.

@Component({
  selector: 'date-range-picker-overview-example',
  templateUrl: 'date-range-picker-overview-example.html',
  styleUrls: ['date-range-picker-overview-example.css'],
})
export class DateRangePickerOverviewExample {
  weekendsDatesFilter = (d: Date): boolean => {
    const day = d.getDay();
    /* Prevent selection of Saturday and Sunday as start or end dates. */
    return day !== 0 && day !== 6;
  };
}
<mat-form-field>
  <mat-label>Select a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker" [dateFilter]="weekendsDatesFilter">
    <input matStartDate matInput placeholder="Start date" >
    <input matEndDate matInput placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>

To see a live demo, check out: StackBlitz Demo

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

Is the MVC pattern adhered to by ExpressJS?

Currently, I am diving into the world of creating an MVC Website With ExpressJS using resources from I'm curious to know if ExpressJS strictly adheres to the MVC pattern, or if it follows a different approach like Flask which focuses more on the "C" ...

What is the best way to repeatedly execute my function at intervals using setInterval?

After attempting to run a for loop 10 times with setInterval to call my function again, I realized that my for loop only runs ten times. How can I fix this issue? function randomThumbNews() { for(var i=0;i<10;i++){ $.ajax({ ...

Executing multiple requests concurrently in Node.js

There seems to be an issue with the API when multiple users are accessing it concurrently. User-1 is receiving User-2's response instead. I suspect this problem may arise from a global variable used in the code below. Please assist me in resolving t ...

Press the button that says "start" using Javascript

Is it possible to modify the button click in this way? $('input[name="submit.one-click-premium-de.x"]').click().first(); Can I use a wildcard for the button name instead of specifying all words? $('input[name="submit.one-click*"]').c ...

KineticJs: Enhancing Rotation with Multitouch Capability

Currently, I have a click event implemented in my code that rotates my puzzle piece by 90 degrees when clicked. However, I would like to change it from a mouse click to a touch event. How can I achieve this? Thank you. piecesArray[i][j].shape.on("mous ...

Tips for displaying the data on top of individual column bars: Hightcharts, Vue-chartkick, and Cube Js

Looking for assistance with adding value labels to the top of each column bar in a Vue chart using chartkick and highcharts. https://i.sstatic.net/c4Bwc.jpg Check out the image above to see my current output. <template> <column-chart lable= ...

What could be the reason for my array being nested inside another array as a value in a dictionary

I am having some difficulty understanding how the selected array is being returned in my dictionary. Could you please provide me with an explanation? The language being used is javascript. I have constructed a dictionary with arrays as values. However, wh ...

What's the reason for text-alignment not functioning properly?

After some testing, I have come up with the following code: .Greetings { width:100%; display:block; text-align:center; font-family: "Times New Roman", Times, serif; font-size:75px; color:#208CB7; } The objective was to center the text on the ...

Automatically formatting text upon entering it in Vue.js

I need assistance with auto-formatting the postal code entered by the user. The rule for the postal code is to use the format A0A 0A0 or 12345. If the user inputs a code like L9V0C7, it should automatically reformat to L9V 0C7. However, if the postal code ...

Is there a way for redux-saga to pause until both actions occur at least once, regardless of the order in which they happen?

Just diving into Redux saga. I'm working on creating a saga that will fetch the initial state for the redux store from our API server. This task involves utilizing two asynchronous sagas: getCurrentUser and getGroups. The goal is to send these ajax ...

Ensure NodeJS/JSDom waits for complete rendering before performing scraping operations

I am currently facing an issue with scraping data from a website that requires login credentials. When I try to do this using JSDom/NodeJS, the results are inconsistent compared to using a web browser like Firefox. Specifically, I am unable to locate the l ...

Why isn't my function being triggered by the Click event?

I can't figure out why the click event isn't triggering the btn() function. function btn() { var radio = document.getElementsByTagName("input"); for (var i = 0; i > radio.length; i++){ if (radio[i].checked){ alert(radio[i].value); } ...

What is the best way to integrate the Telegram login widget into an Angular application?

Does anyone know how I can integrate the Telegram login widget into my Angular application without resorting to hacks? The required script is as follows: <script async src="https://telegram.org/js/telegram-widget.js?5" data-telegram-login="bot_name" ...

Struggling to Manage and Preserve Cookies in Browser While Using React App Hosted on GitHub Pages and Node.js Backend Running on Render

I've encountered a challenge with setting and storing cookies in the browser while utilizing a React application deployed on GitHub Pages and a Node.js backend hosted on Render. Let me explain the setup and the issue I'm facing: Setup: Frontend ...

Converting from Async.js parallel to Bluebird: A Step-by-Step Guide

Utilizing async.js allows me to define promises with handlers, providing polymorphism and separating results. Can this be achieved in bluebird as well? async.parallel({ cityPromises: (cb)=>{ City.find({ ...

Troubleshooting: Issues with accessing object properties in a function in AngularJS

In my controller, I have a function that checks the day and changes the isOpen property of an object based on the time. The object is retrieved using the code snippet below: $http.get('js/data.json').success(function(data) { $scope.locations = ...

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

connecting with Google Analytics

We are looking to incorporate Google Analytics into a sizable .NET website. The website utilizes multiple master pages (4 or 5), so the plan was to insert the necessary JavaScript code into each master page. <script type="text/javascript">//<![CD ...

Creating an interface for writing types in Firebase functions/storage/database

What are the TypeScript types for Firebase functions, storage, and admin? I'm fairly new to TypeScript and currently in the process of updating my JavaScript code to TypeScript. Within my code, I am generating a context object. const context = { ...

What is the process for transforming an Object into a different type in this specific scenario?

Having an issue where I need to pass the data Object into a method, but it's saying that it doesn't have the hits property. Normally I would just use (data:any), however, since I also require the news data, that is not possible. Any suggestions o ...