Cannot re-select date once cleared

[psenechal]

Hello...I noticed a strange behavior today. If after selecting a date with the datepicker, you clear the input value. The next time you open the datepicker, it appears the previous date is still selected in the datepicker popup. If you select the same date again it appears it doesn't think anything has been changed and therefore doesn't emit the value back to the input. You have to select a different date, then you can open the datepicker popup again and select the original date. This behavior does not occur with the normal Angular Material datepicker.

Just thought I would let you know...thanks

[matheo]

@psenechal Thanks for reporting! I will check what's happening.

[matheo]

@psenechal please try again with @coachcare/datepicker 0.9.3

I went deep into the issue and I understood the root of the problem (I think) so I added many possibles formats for manual input (in our MatMomentDateModule): https://github.com/selvera/npm-datepicker/blob/master/datepicker/src/lib/moment-adapter/moment-date-formats.ts#L13-L15

If you experience the same issue, I may need your detailed setup to reproduce it, like if you're using ReactiveForms or TemplateForms, your component/field setup and the steps to see the issue. I think the handling of the default active date is different between modules. Thanks!

[psenechal]

Just tried the new version. It didn’t resolve the issue and I actually lost the background of the datepicker pop up now...it’s transparent. I’m sure that’s just a minor thing, but the change didn’t resolve the same date issue.

I am using Reactive Forms...Angular 6. My field setup is pretty much exactly like an Angular Material datepicker setup from their website examples...inside a mat-form-field tag. I encounter the problem with and without a required validator.

It also occurs whether or not I make the input field readonly so you have to click the icon to open the datepicker.

Let me know if there is any other info I can provide.

[psenechal]

    "name": "gotbrix",
    "version": "0.0.0",
    "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "6.0.6",
        "@angular/cdk": "6.3.1",
        "@angular/common": "6.0.6",
        "@angular/compiler": "6.0.6",
        "@angular/core": "6.0.6",
        "@angular/flex-layout": "6.0.0-beta.16",
        "@angular/forms": "6.0.6",
        "@angular/http": "6.0.6",
        "@angular/material": "6.3.1",
        "@angular/platform-browser": "6.0.6",
        "@angular/platform-browser-dynamic": "6.0.6",
        "@angular/router": "6.0.6",
        "@auth0/angular-jwt": "2.0.0",
        "@coachcare/datepicker": "0.9.3",
        "@ncstate/sat-popover": "2.1.1",
        "@ng-select/ng-select": "2.3.2",
        "@progress/kendo-angular-buttons": "4.1.1",
        "@progress/kendo-angular-dateinputs": "3.4.2",
        "@progress/kendo-angular-dropdowns": "3.0.2",
        "@progress/kendo-angular-excel-export": "2.1.0",
        "@progress/kendo-angular-grid": "3.5.0",
        "@progress/kendo-angular-inputs": "3.1.3",
        "@progress/kendo-angular-intl": "1.4.1",
        "@progress/kendo-angular-l10n": "1.2.0",
        "@progress/kendo-angular-popup": "2.4.1",
        "@progress/kendo-data-query": "1.3.1",
        "@progress/kendo-drawing": "1.5.6",
        "@progress/kendo-theme-material": "1.1.3",
        "angular2-text-mask": "9.0.0",
        "core-js": "2.5.7",
        "hammerjs": "2.0.8",
        "moment": "2.22.2",
        "moment-timezone": "0.5.21",
        "ng-busy": "6.0.0-rc4",
        "ng-recaptcha": "3.0.5",
        "ng2-file-upload": "1.3.0",
        "ng2-validation": "4.2.0",
        "ngx-perfect-scrollbar": "6.2.0",
        "ngx-permissions": "5.0.0",
        "rxjs": "6.2.1",
        "rxjs-compat": "6.2.1",
        "text-mask-addons": "3.7.2",
        "zone.js": "0.8.26"
    },
    "devDependencies": {
        "@angular/cli": "6.0.8",
        "@angular/compiler-cli": "6.0.6",
        "@angular/language-service": "6.0.6",
        "@angular-devkit/build-angular": "0.6.8",
        "@types/jasmine": "2.8.8",
        "@types/jasminewd2": "2.0.3",
        "@types/node": "10.3.6",
        "codelyzer": "4.4.2",
        "jasmine-core": "3.1.0",
        "jasmine-spec-reporter": "4.2.1",
        "karma": "2.0.4",
        "karma-chrome-launcher": "2.2.0",
        "karma-coverage-istanbul-reporter": "2.0.1",
        "karma-jasmine": "1.1.2",
        "karma-jasmine-html-reporter": "1.1.0",
        "protractor": "5.3.2",
        "ts-node": "7.0.0",
        "tslint": "5.10.0",
        "typescript": "2.7.2"
    }
}

<mat-form-field color="accent">
    <input matInput [matDatepicker]="purchasedDate" placeholder="Purchased Date" formControlName="purchasedDate" readonly>
    <button *ngIf="cellarForm.get('purchasedDate').value" mat-icon-button matSuffix (click)="$event.preventDefault(); $event.stopPropagation(); cellarForm.get('purchasedDate').setValue(null)">
        <mat-icon>close</mat-icon>
    </button>
    <mat-datepicker-toggle matSuffix [for]="purchasedDate"></mat-datepicker-toggle>
    <mat-datepicker #purchasedDate [touchUi]="isTouch"></mat-datepicker>
</mat-form-field>

[matheo]

Ok, I got you @psenechal ;D I found the responsible line, I knew I missed something when I updated my logic to 6. Also I fixed the background-color to the background.dialog material theme color, and the --bg-dialog CSS variable.

In the other hand, I introduced a new method to MatDatepicker: reset(value?) Adding type="button" I didn't need the stopPropagation and your code can look like this:

<button mat-icon-button matSuffix type="button"
  *ngIf="form.get('purchasedDate').value" (click)="purchasedDate.reset(null)">
  <mat-icon>close</mat-icon>
</button>

Try it and enjoy!

[psenechal]

yep...all good now. Thanks!