The current Date selected when toggling on date picker modal

Topic: The current Date selected when toggling on date picker modal

remiB free asked 5 years ago

In my context, I would like to have the default date of my mdb date picker input selected on the current day by the opening of the modal.

Also may you explain me why when you define the maxDate of the datePicker at "9999", the latest year appearing is 2026 ?

Thanks in advance for your answer

enter image description here

<div class="md-form date-input md-outline col-md-4">
        <mdb-date-picker
          [label]="'Date de fin du contrat*'"
          [outlineInput]="true"
          name="dateFin"
          [placeholder]="'Ex : 31/12/9999'"
          [locale]="'fr'"
          formControlName="dateFin"
          id="inputDdf"
          [options]="maDatePickerOptions"
          [ngClass]="{ 'is-invalid': submitted && dateFin.errors }"></mdb-date-picker><mdb-icon far icon="calendar-alt"></mdb-icon>
        <mdb-error *ngIf="dateFin.invalid && (dateFin.dirty || dateFin.touched)" class="invalid-feedback">
          <div>Une date de fin est requise</div>
        </mdb-error>
      </div>

      // Options pour le Date Picker
  public maDatePickerOptions: IMyOptions = {
    showClearDateBtn: false,
    editableDateField: true,
    minYear: 1990,
    maxYear: 9999
  };

Add comment

Bartosz Termena staff answered 5 years ago

0 0 Best answer

Dear <a href="/profile/?id=65699" target="_blank" rel="nofollow">@remiB</a>

To set current date in date picker with reactive forms, try this (full example below):

ts

<pre class="prettyprint"><code> public myDatePickerOptions: IMyOptions = {
 showClearDateBtn: false,
 editableDateField: true,
 minYear: 1990,
 maxYear: 9998,
 };

datePickerForm: FormGroup;

ngOnInit() {
 const selectedDate = {
 date: {
 year: new Date().getFullYear(),
 month: new Date().getMonth() + 1,
 day: new Date().getDate(),
 },
 };
 this.datePickerForm = new FormGroup({
 datePickerControl: new FormControl(selectedDate),
 });
 }
</code></pre>

About <code>maxYear: 9999</code>, yes you are right, the problem occurs. We will try to fix that as soon as possible.

Best Regards, Bartosz.

Please insert min. 20 characters.

Dear @remiB

To set current date in date picker with reactive forms, try this (full example below):

 <mdb-date-picker
          [label]="'Date de fin du contrat*'"
          [outlineInput]="true"
          name="mydate"
          [options]="myDatePickerOptions"
          formControlName="datePickerControl"
          required
        ></mdb-date-picker>

 public myDatePickerOptions: IMyOptions = {
    showClearDateBtn: false,
    editableDateField: true,
    minYear: 1990,
    maxYear: 9998,
  };

  datePickerForm: FormGroup;

  ngOnInit() {
    const selectedDate = {
      date: {
        year: new Date().getFullYear(),
        month: new Date().getMonth() + 1,
        day: new Date().getDate(),
      },
    };
    this.datePickerForm = new FormGroup({
      datePickerControl: new FormControl(selectedDate),
    });
  }

About maxYear: 9999, yes you are right, the problem occurs. We will try to fix that as soon as possible.

Best Regards, Bartosz.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 8.4.0
Device: Laptop
Browser: Google Chrome
OS: Linux
Provided sample code: No
Provided link: No

remiB

15Support score
3Questions 0Answers 0Snippets