question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is there a way to use mat-calendar with range dates?

See original GitHub issue

I see mat-date-range-picker uses mat-calendar internaly. Is there a way I can use directly the mat-calendar and yet select a range of dates? I’m asking this because I want to customize my modal and display a list of suggested date ranges along with the calender it self. Seems to me that the better way to do this is using only the calendar.

I would like to do something like this:

<div class="modal">
  <ul>
    <li>Date range suggestion</li>
  </ul>
  <mat-calendar></mat-calendar>
</div>

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
crisbetocommented, Aug 14, 2020

We don’t have any live examples of a standalone mat-calendar, but you can check out this recent issue that has some links https://github.com/angular/components/issues/20307.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 14, 2020

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to implement a Date Range Picker using mat-calendar in ...
You have to provide a range selection strategy to get the preview working. ... Note: mat date range picker only work on Angular...
Read more >
Angular Date Range Picker with Custom Range Presets
Angular 10 introduced a new Date Range Picker in its Material component library, but it lacks custom range selections. We add them using...
Read more >
Angular Material Datepicker: Complete Guide
Complete guided tour to the Angular Material Datepicker component, from the most commonly used features to the most advanced ones.
Read more >
How to Implement Date Range Picker in Angular 13
The date range is a component which allows you to choose dates between two range from the calendar widget. Sometimes, you have to...
Read more >
Angular Material Datepicker Tutorial - KnowledgeHut
We can allow the users to select a date range instead of a single date by using the mat-date-range-input and mat-date-range-picker components as ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found