Components: Datepicker: Use md-calendar without md-datepicker

[ahillhouse]

Bug, feature request, or proposal:

Proposal

What is the expected behavior?

MdCalendar is exported in the MdDatepickerModule so it can be used by itself.

What is the current behavior?

MdCalendar is not exported.

What is the use-case or motivation for changing an existing behavior?

Want to have two calendars open next to each other to create a range.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

Is there anything else we should know?

This seems like it should be a simple change but I wanted to double check that there wasn't an intentional reason for not exporting the MdCalendar (like it is in AngularJs Material)

[tmakin]

I am currently working round this issue by using an instance of datepicker-content component bound to a custom object that contains the appropriate fields from the datepicker component. This is messy and is likely break silently if the datepicker-content binding changes.

Ideally I would like MdCalendar to be exported as per the request above, but if that is not possible then an alternative would be to define the binding for datepicker-content using an interface instead of a class i.e. DatepickerAdapter which would allow custom implementations to be used with datepicker-content in a type safe way.

[tmakin]

For info here are the bones of my hackish approach:

//Custom datepicker class exposing the required properties for datepicker-content
//This would be much tidier if it could inherit from same interface as Datepicker
class CustomDatePicker
{
  readonly id: string = "CustomDatePicker";
  readonly startAt: Date = null;
  readonly startView: 'month' | 'year';
  readonly selectedChanged: EventEmitter<Date> = new EventEmitter<Date>();
  readonly _selected: Date = null;
  readonly _minDate: Date = null;
  readonly _maxDate: Date = null;
  readonly _dateFilter: (date: Date) => boolean;

  constructor(date?:Date) {
    this._selected = this.startAt = date;
    this.startView = "month";
  }

  _selectAndClose(date: Date): void {
    this.selectedChanged.emit(date);
  }

  // This is triggered when escape key is pressed
  close():void {
  }
}

And then inside my custom datepicker component:

@Component({
  template: `    
      <md-datepicker-content></md-datepicker-content>
    `
})
export class CustomDatePicker {

  private readonly datePicker:CustomDatePicker;
  @ViewChild(MdDatepickerContent) datepickerContent: MdDatepickerContent<Date>;

  constructor(private dateAdapter: DateAdapter<Date>) {
    this.datePicker = new CustomDatePicker(new Date());
    this.datePicker.selectedChanged.subscribe(date => {
      ...
    });
  }

  ngOnInit() {
    //here the nasty bit as we need to coerce the custom datepicker type
    this.datepickerContent.datepicker = <MdDatepicker<Date>>this.datePicker;
  }

[saqibn]

When can we expect this feature to be implemented, it is pending for a long time now.

[mmalerba]

6314 added an export for MdCalendar. It has been merged and will be available when we do our next release

[CDDelta]

Close?

[Krishna-Agrawal]

As Documentation of matCalender is still missing, this might be helpful :
matCalender is now exported to use independently <matCalendar></matCalendar>

@Input :
startAt: Date | null
startView: 'month' | 'year' | 'multi-year'
selected: Date | null
minDate: D | null
maxDate: D | null
dateFilter: (date: D) => boolean

@Output :
selectedChange: EventEmitter

Code file https://github.com/angular/material2/blob/master/src/lib/datepicker/calendar.ts

[megalucio]

👏

[shellyniz]

https://github.com/angular/material2/blob/master/src/lib/datepicker/calendar.ts link is borken (404)

[mariohmol]

Hi.. could make it work, but how do I add 'events' to show up in the days?

imports: [
 ...
    MatDatepickerModule,
    MatNativeDateModule
  ],

and

<mat-calendar></mat-calendar>

[saideldah]

it's working on angular version 6.x

<mat-calendar [selected]="selectedDate" (selectedChange)="selectedChange($event)" (yearSelected)="yearSelected()" (monthSelected)="monthSelected()" (_userSelection)="userSelection()" (cdkAutofill)="cdkAutofill()"> </mat-calendar>

but still missing some needed events
like an event for the next and previous buttons

[silentsnooc]

@saeedeldah It does work for me but if I select a day it's not highlighted. Am I missing something here? And would there be a way to highlight an entire week - or more generally - arbitrary days?

[artem-galas]

@silentsnooc it's not highlighted because you didn't set [selected]="selectedDate" and also you should implement (selectedChange)="selectedChange($event)"

selectedChange(date) {
    this.selectedDate = date;
  }

[fabdeceglia]

Is there any chance to get updated also the month while updating the date value outside the component?

I mean, if i change the date outside the component, the selection is correctly updated, but as soon as also the month change, the calendar does not change the calendar.
The attribute that i am updating on the calendar is the _activeDate.

ngOnChanges(): void { this.calendar._activeDate = this.selectedDate; }

[angular-automatic-lock-bot[bot]]

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._}