Range: when resetting the form value, the values of begin and end are not reseted.

[sancaruso]

When in single selection mode, if we reset the form value driving the selected date, then the value of selectedValue is correctly reseted in the SatCalendarBody component.

But in range mode, this is not the case: the values of begin and end in SatCalendarBody remain unchanged.

I think this is a bug.

[SaturnTeam]

How do you reset value?

[sancaruso]

I tried with both ngModel and formControl (respectively resetting the form by setting the model to null and with form.reset()) and I have the same problem.

But indeed, I made more tests and the problem happens only when I reset the form immediately after the dateChange event.

Wrapping the reset in a setTimeout(() => {...}, 0) solves the problem.

Moreover, this only happens when the closeAfterSelection option is false.

So perhaps it could be solved with a markForCheck somewhere but I don't know where.

[sancaruso]

Here is a sample to reproduce the bug:

import { Component } from '@angular/core';
import {FormBuilder, FormGroup} from "@angular/forms";

@Component({
  selector: 'app-root',
  template: `
      <form [formGroup]="form">
          <mat-form-field>
              <input matInput
                     placeholder="Choose a date"
                     [satDatepicker]="picker"
                     (dateChange)="dateChange($event)"
                     formControlName="date">
              <sat-datepicker #picker [rangeMode]="true"
                              [closeAfterSelection]="false">
              </sat-datepicker>
              <sat-datepicker-toggle matSuffix [for]="picker"></sat-datepicker-toggle>
          </mat-form-field>
      </form>
`,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
    form: FormGroup;
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            date: [{ begin: new Date(2018, 7, 5), end: new Date(2018, 7, 25) }]
        });
    }

    dateChange(event) {
        // Do some stuff
        this.form.reset();
    }

}

[SaturnTeam]

It's a very interesting bug. I've found out that _beginDate is null in SatDatepicker, but beginDate in SatCalendar receives old value. It seems like angular issue

[agiratech-kumaresanj]

Hope, maybe it will help you, To reset i have tried like this, passing | assigning the [beginDate] and [endDate] value as null on sat-calendar.

[Zacknero]

Hope, maybe it will help you, To reset i have tried like this, passing | assigning the [beginDate] and [endDate] value as null on sat-calendar. Don't work this!

I tried in this mode but don't work same:

@ViewChild(SatCalendar, {static: true}) calendar: SatCalendar<Date> this.calendar.beginDateSelected = false; this.calendar.beginDate = null; this.calendar.maxDate = null; this.calendar.selected = null; this.calendar.startAt = null; ;

So it's a BUG of library and must to be fix or insert new solution

[agiratech-kumaresanj]

Hope, maybe it will help you, To reset i have tried like this, passing | assigning the [beginDate] and [endDate] value as null on sat-calendar. Don't work this!

I tried in this mode but don't work same:

@ViewChild(SatCalendar, {static: true}) calendar: SatCalendar<Date> this.calendar.beginDateSelected = false; this.calendar.beginDate = null; this.calendar.maxDate = null; this.calendar.selected = null; this.calendar.startAt = null; ;

So it's a BUG of library and must to be fix or insert new solution

You have to pass the values(beginDate and endDate) like below in sat-calender element <sat-calendar [beginDate]="calendar.beginDate" [endDate] = "calendar.maxDate">

[Zacknero]

Hope, maybe it will help you, To reset i have tried like this, passing | assigning the [beginDate] and [endDate] value as null on sat-calendar. Don't work this!

I tried in this mode but don't work same: @ViewChild(SatCalendar, {static: true}) calendar: SatCalendar<Date> this.calendar.beginDateSelected = false; this.calendar.beginDate = null; this.calendar.maxDate = null; this.calendar.selected = null; this.calendar.startAt = null; ; So it's a BUG of library and must to be fix or insert new solution

You have to pass the values(beginDate and endDate) like below in sat-calender element <sat-calendar [beginDate]="calendar.beginDate" [endDate] = "calendar.maxDate">

The my setup is: The user click one day and the week is selected (from Monday to Sunday). When click other day of week this reset week and re-click day for select week. The bug is when the user (after clicked the day and selected week) re-click the same day or day in week selected, the saturn fire (beginDateSelectedChange) and this work badly.

Example StackBlitz

So i would reset range of days or send to set beginDate = null

NOTE: i don't konow because stackblitz don't work with momentjs. So you must try in local for try work example

[Zacknero]

Hope, maybe it will help you, To reset i have tried like this, passing | assigning the [beginDate] and [endDate] value as null on sat-calendar. Don't work this!

I tried in this mode but don't work same: @ViewChild(SatCalendar, {static: true}) calendar: SatCalendar<Date> this.calendar.beginDateSelected = false; this.calendar.beginDate = null; this.calendar.maxDate = null; this.calendar.selected = null; this.calendar.startAt = null; ; So it's a BUG of library and must to be fix or insert new solution

You have to pass the values(beginDate and endDate) like below in sat-calender element <sat-calendar [beginDate]="calendar.beginDate" [endDate] = "calendar.maxDate">

The my setup is: The user click one day and the week is selected (from Monday to Sunday). When click other day of week this reset week and re-click day for select week. The bug is when the user (after clicked the day and selected week) re-click the same day or day in week selected, the saturn fire (beginDateSelectedChange) and this work badly.

Example StackBlitz

So i would reset range of days or send to set beginDate = null

NOTE: i don't konow because stackblitz don't work with momentjs. So you must try in local for try work example

TEMPORARY SOLUTION: I Added SCSS/CSS attributes on root style (style.scss) `.mat-calendar-body-selected { pointer-events: none; cursor: default; text-decoration: none; color: black; }

.mat-calendar-body-begin-range:not(.mat-calendar-body-end-range) { pointer-events: none; cursor: default; text-decoration: none; color: black; }

.mat-calendar-body-end-range:not(.mat-calendar-body-begin-range) { pointer-events: none; cursor: default; text-decoration: none; color: black; }

.mat-calendar-cell-semi-selected { pointer-events: none; cursor: default; text-decoration: none; color: black; }`