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)