[Datepicker] clicking on calendar icon sets the date

[kukodev]

Is this a bug, enhancement, or feature request?

bug

Briefly describe your proposal.

Clicking on calendar icon sets the date (to null) triggering validation. The same will not happen if you enter calendar by clicking on the input rather than calendar icon.

Which versions of Angular and Fundamental NGX are affected? (If this is a feature request, use current version.)

latest

If this is a bug, please provide steps for reproducing it.

[kukodev]

This fix is creating other problems:

Before:

• click on input resulted in: open calendar + no changes to form value
• click on calendar icon resulted in: open calendar + changes form value from null to { date: null }

Now:

• click on input results in: open calendar + changes form value from null to { date: null }
• click on calendar icon results in: open calendar + changes form value from null to { date: null }

Expected:

• click on input results in: open calendar + no changes to form value
• click on calendar icons results in: open calendar + no changes to form value

This creates various problems, i.e validation. Component starts with null form value, but then is changed to { date: null } just after user clicks on calendar input/icon (which triggers validation already).

[droshev]

@mikerodonnell89

[mikerodonnell89]

@konradkukier2 How are you setting up the form in your component? It should behave properly if set up like so

import { FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'fd-date-picker-single-example',
    template: `<form [formGroup]="customForm">
                 <fd-date-picker formControlName="formDate"></fd-date-picker>
               </form>
               <div>Selected Date: {{selectedDay.value.date ? selectedDay.value.date.toDateString() : 'null'}}</div>`
})
export class DatePickerSingleExampleComponent {

    customForm = new FormGroup({
        formDate: new FormControl({
            date: null
        })
    });

    get selectedDay() { return this.customForm.get('formDate'); }

}

[kukodev]

Hey thanks for pointing this out. I was indeed initializing form with just null.

Anyways, this didnt solve my problem with validation. Turns out that even now, when finally my value doesnt change after entering calendar (it starts with { date: null } and upon entering calendar it stays { date: null } - the dirty flag is triggered. It works differently for input (touched is triggered when entering input, and dirty is triggered when entering value - which I think is correct). With datepicker, touched is not triggered at all, but dirty is triggered very early.

Should I create separate issue for that?

related gif:

[mikerodonnell89]

Thanks Konrad I will work on this

[kukodev]

@mikerodonnell89 Hi, so I've checked and now it works better (dirty state is good now) but it is somehow still not consistent with what we see on other inputs

for name input (see gif above) touched is set to true on leaving the input (blur event?) for datepicker touched is set to true on entering the input

I'd like to show validation errors when user leaves the fields, not when he enters them, nor dirty or touched do that job in date pickers case

[kukodev]

@mikerodonnell89 should I open new issue regarding that?

[MattL75]

@konradkukier2 We're reworking the calendar as we speak, and that will likely include a large revamp of the datepicker. Please open a separate issue so we can track it better :)