CODEWITHSUNDEEP
angularmaterial-design
Pame1692
Pame1692

Reputation: 229

Set range for mat-datepicker

I have two date pickers: start date and end date. I want to check which dates are selected in order to deny the user to select a start date greater then the end date and an end date smaller than the start date. 

<mat-form-field class="my-datepicker">
  <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today" [formControl]="startDate">
  <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
  <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>

<mat-form-field class="my-datepicker">
  <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today"  [formControl]="endDate">
  <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
  <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

How can I set programmatically the dates in order to achive this result?

Upvotes: 1

Views: 6049

Answers (4)

MJ X
MJ X

Reputation: 9054

Here is a working example if you are using Reactive forms, I used the Min and Max feature as the other answer was missing the actual solution for reactive forms I am posting this to help someone who needs.

Component:

 export class AnnouncementformComponent implements OnInit {
   constructor(private _formBuilder: FormBuilder){}

   Announcementform: FormGroup;
   minDate:Date;

  this.Announcementform = this._formBuilder.group({

  PublishedFrom: ['', Validators.required],
  PublishedTo: ['', Validators.required],

 });
 this.Announcementform.valueChanges.subscribe(res=>{
        this.minDate = new Date(res.PublishedFrom);
  });

component.html

               <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="PublishedFrom" placeholder="Publish FROM *"
                        formControlName="PublishedFrom">
                        <mat-label>Publish FROM *</mat-label>
                    <mat-datepicker-toggle matSuffix [for]="PublishedFrom"></mat-datepicker-toggle>
                    <mat-datepicker #PublishedFrom></mat-datepicker>
                </mat-form-field>
                <mat-form-field appearance="outline">
                    <input matInput [matDatepicker]="PublishedTo" placeholder="Publish To *"
                        formControlName="PublishedTo" [min]="minDate">
                        <mat-label>Publish TO *</mat-label>
                    <mat-datepicker-toggle matSuffix [for]="PublishedTo"></mat-datepicker-toggle>
                    <mat-datepicker #PublishedTo></mat-datepicker>
                </mat-form-field>

Upvotes: 0

Rak2018
Rak2018

Reputation: 965

You need to modify your code a little. In HTML :

<mat-form-field >
  <input matInput [matDatepicker]="pickerstart" placeholder="Choose start date" [max]="today<endDate|| endDate == undefined?today:endDate"  [(ngModel)]="startDate" >
  <mat-datepicker-toggle matSuffix [for]="pickerstart"></mat-datepicker-toggle>
  <mat-datepicker #pickerstart></mat-datepicker>
</mat-form-field>
<mat-form-field >
  <input matInput [matDatepicker]="pickerend" placeholder="Choose end date" [max]="today" [min]="startDate"   [(ngModel)]="endDate"  >
  <mat-datepicker-toggle matSuffix [for]="pickerend"></mat-datepicker-toggle>
  <mat-datepicker #pickerend></mat-datepicker>
</mat-form-field>

In TS file:

today = new Date();
 ngOnInit() {
    this.today = JSON.parse(JSON.stringify(this.today)).substring(0, 10);
}

Upvotes: 1

Michał Z.
Michał Z.

Reputation: 1392

Check this out: https://material.angular.io/components/datepicker/overview#setting-the-calendar-starting-view

If you store end date as endDate, then for example:

<mat-datepicker ... [startAt]="endDate"></mat-datepicker>

Or as Datepicker with min & max validation example: https://material.angular.io/components/datepicker/examples

<input matInput [min]="endDate" ... >

Or even more general, using Datepicker with filter validation example from link above.

More info about how to use min/max and filter: https://material.angular.io/components/datepicker/overview#date-validation

Upvotes: 0

OnnaB
OnnaB

Reputation: 248

Try this, for me work html code:

  <div class="row">
    <div class="input-field col s12">
      <input formControlName="contratedate" id="contratedate" type="date" class="datepicker" materialize="pickadate" [materializeParams]="[{ format: 'yyyy-mm-dd', formatSubmit: 'yyyy-mm-dd',
        closeOnSelect: true, selectMonths: true, selectYears: true, today: '',
        max: true, onSet: onSetDatepicker }]">
      <label for="contratedate">Data*</label>
    </div>
  </div>

and ts code:

import 'hammerjs';
import * as moment from 'moment';
  onSetDatepicker(date) {
    if (date.select) {
      $('#birthDate').pickadate().pickadate('picker').close();
    }
  }

Upvotes: 0

Related Questions