[Angular 5] Mise en place datepicker

Version imprimable

Bonjour,

je n'arrive pas à faire marché le datepicker + matérial
que manque t'il ?

voici mon app module:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {MatDatepickerModule} from '@angular/material/datepicker';
import { MatInputModule} from '@angular/material/input';
 
import {CommonModule} from '@angular/common';
 
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CalendrierComponent } from './calendrier/calendrier.component';
 
@NgModule({
  declarations: [
    AppComponent,
 
    ContactFormComponent,
 
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: false } // <-- debugging purposes only
    ),
    BrowserModule, FormsModule, HttpClientModule, BrowserAnimationsModule, ReactiveFormsModule,
 
    MatDatepickerModule, MatInputModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

voici ma vue

Code:

1
2
3
4
5
6
<h1>prendre un rendez-vous</h1>
 
 
    <input matInput [matDatepicker]="picker" placeholder="Choose a date">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>

et voici mon composant:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import { Component, OnInit } from '@angular/core';
import { VisiteurService } from '../visiteur.service';
import { HttpClient } from '@angular/common/http';
import { ArrayType } from '@angular/compiler/src/output/output_ast';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {
  MatAutocompleteModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
} from '@angular/material';
 
interface JourDispo {
  jour: string;
  dispo: number; //0 dispo; 1 indispo
}
 
@Component({
  selector: 'app-calendrier',
  templateUrl: './calendrier.component.html',
  styleUrls: ['./calendrier.component.css']
})
 
export class CalendrierComponent implements OnInit {
 
  public matDatepicker ; //saisie de la date

je ne vois pas mon datepicker, que manque t'il ?

merci de vos réponse :)

c'est bon j'ai trouvé un lien qui ma bien aidé :)

https://medium.com/@esanjiv/working-...r-76d4446277dc

Par contre mon fichier module n'est pas très jolie :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import {MatCheckboxModule} from '@angular/material/checkbox';
import {MatRadioModule} from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select';
import { NgModule } from '@angular/core';
import {MatInputModule} from '@angular/material/input';
 
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
 
//DATE PICKER
// Custom DateAdapter
 
import {MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS} from '@angular/material';
 
// extend NativeDateAdapter's format method to specify the date format.
export class CustoMatateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
      if (displayFormat === 'input') {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();
         // Return the format as per your requirement
         return `${year}-${month}-${day}`;
      } else {
         return date.toDateString();
      }
   }
 
   // If required extend other NativeDateAdapter methods.
}
 
const MY_DATE_FORMATS = {
   parse: {
      dateInput: {month: 'short', year: 'numeric', day: 'numeric'}
   },
   display: {
      dateInput: 'input',
      monthYearLabel: {year: 'numeric', month: 'short'},
      dateA11yLabel: {year: 'numeric', month: 'long', day: 'numeric'},
      monthYearA11yLabel: {year: 'numeric', month: 'long'},
   }
};
 
@NgModule({
   declarations: [],
   imports: [],
   exports: [MatDatepickerModule, MatNativeDateModule],
   providers: [
      {
         provide: DateAdapter, useClass: CustoMatateAdapter
      },
      {
         provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
      }
   ]
})
 
export class DatePickerModule {
 
}
 
 
//
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule, //nécessite form module !
    FormsModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
 
 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

comment je peux faire pour mettre juste la partie date picker dans autre fichier ?
je pourrais importer CustoMatateAdapter , mais qu'en est t'il de la constante const MY_DATE_FORMATS ?

02/04/2018, 16h56
Marco46

Ben tu n'importes que MY_DATE_FORMATS sinon tu l'exposes au travers de ton composant.

Merci, par contre
qu'est ce que je fait du provider, car si l'enlève la constante:

Code:

1
2
 
ERROR in src/app/app.module.ts(59,42): error TS2304: Cannot find name 'MY_DATE_FORMATS'.

voici mon nouveau module

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
 
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
 
//DATE PICKER
// Custom DateAdapter
 
import { MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 
// extend NativeDateAdapter's format method to specify the date format.
export class CustoMatateAdapter extends NativeDateAdapter {
  format(date: Date, displayFormat: Object): string {
    if (displayFormat === 'input') {
      const day = date.getUTCDate();
      const month = date.getUTCMonth() + 1;
      const year = date.getFullYear();
      // Return the format as per your requirement
      return `${year}-${month}-${day}`;
    } else {
      return date.toDateString();
    }
  }
  // If required extend other NativeDateAdapter methods.
}
 
 
//
 
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatCheckboxModule,
    MatRadioModule,
    MatSelectModule, //nécessite form module !
    FormsModule,
    MatInputModule,
    MatDatepickerModule,
    MatNativeDateModule,
  ],
  providers: [{
    provide: DateAdapter, useClass: CustoMatateAdapter
  },
  {
    provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
  }],
  exports: [MatDatepickerModule, MatNativeDateModule],
  bootstrap: [AppComponent]
})
export class AppModule { }
 
 
export class DatePickerModule {
 
}

03/04/2018, 10h45
Marco46

Si tu as besoin de cet objet de config dans le module appelant ton composant et que tu ne veux faire tes imports material que dans ton composant il faut que ton composant exposant une fonction renvoyant l'objet de config. Et là tu n'auras plus besoin d'importer material dans ton module appelant.

ok, merci .

Maintenant que j'ai mon date picker comment récupérer dans la console mes dates ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<h1>test material</h1>
checkbox:
<mat-checkbox 
#showDetails
[value]=""
[checked]="isChecked"
(change)="onChange($event)"
>plus de détail</mat-checkbox>
<div *ngIf="showDetails.checked">détail ...</div>
 
bouton radio:
<hr/>
<mat-radio-group value="0"> 
  <mat-radio-button value="1">Homme</mat-radio-button>
  <mat-radio-button value="0">Femme</mat-radio-button>
</mat-radio-group>
 
<hr/>
liste déroulante:
<mat-select [(ngModel)]="color">
  <mat-option *ngFor="let color of colors" 
          value="color.id">{{color.name}}</mat-option>
</mat-select>
 
<hr/>
input : 
<mat-input-container>
  <input type="text" matInput placeholder="votre nom">
  <mat-hint>Votre nom de famille</mat-hint>
  <span matSuffix>@test@fr</span>
</mat-input-container>
 
<hr/>
<h1>datpicker</h1>
<mat-form-field>
  <input matInput 
    [matDatepicker]="picker" 
    placeholder="Choose a date"
 
 
    >
  <mat-datepicker-toggle 
  matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker 
    (selectedChange)="valider()" 
 
    #picker>
  </mat-datepicker>
</mat-form-field>

j'ai mis une méthode valider(), par contre dès que j'ai choisi une date je n'ai pas mon message de test:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
import { Component } from '@angular/core';
//DATE PICKER
// Custom DateAdapter
 
import { MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
 
const MY_DATE_FORMATS = {
  parse: {
    dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
  },
  display: {
    dateInput: 'input',
    monthYearLabel: { year: 'numeric', month: 'short' },
    dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
    monthYearA11yLabel: { year: 'numeric', month: 'long' },
  }
};
 
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
 
 
 
export class AppComponent {
  title = 'app';
  isChecked = false;
  matDatepicker;
 
  colors=[
    {id:1,name:'blue'}, {id:2,name:'red'}, {id:2,name:'green'},
  ]
 
  onChange($event){
    console.log($event);
  }
 
  valider(){
    console.log("pick date");
  }
 
 
}

la console n'affiche pas pick date ...

j'ai trouvé ce que je voulais :)

Code:

1
2
3
4
5
6
7
8
9
10
 
<mat-form-field>
  <input 
 
  matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker  (selectedChanged)="changer($event)"></mat-datepicker>
</mat-form-field>
 
{{  matDatepicker}}

2 pièce(s) jointe(s)

J'ai un autre petite souci, j'ai essayer de mettre le calendrier en français,
mais il est à moitié traduit

Pièce jointe 368232

faut t'il renter dans le dossier @angular/material pour modifier correctement la traduction ?

voici mon nouveau fichier material ou j'ai configurer la langage

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
 
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { NgModule } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
 
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
 
//DATE PICKER
// Custom DateAdapter
 
 
import {MatDatepickerModule, MatNativeDateModule, NativeDateAdapter, DateAdapter, MAT_DATE_FORMATS,MAT_DATE_LOCALE} from '@angular/material';
 
// extend NativeDateAdapter's format method to specify the date format.
export class CustoMatateAdapter extends NativeDateAdapter {
   format(date: Date, displayFormat: Object): string {
      if (displayFormat === 'input') {
         const day = date.getUTCDate();
         const month = date.getUTCMonth() + 1;
         const year = date.getFullYear();
         // Return the format as per your requirement
         return `${year}-${month}-${day}`;
      } else {
         return date.toDateString();
      }
   }
 
   // If required extend other NativeDateAdapter methods.
}
 
 
const MY_DATE_FORMATS = {
 
    parse: {
        dateInput: { month: 'short', year: 'numeric', day: 'numeric' }
    },
    display: {
        dateInput: 'input',
        monthYearLabel: { year: 'numeric', month: 'short' },
        dateA11yLabel: { year: 'numeric', month: 'long', day: 'numeric' },
        monthYearA11yLabel: { year: 'numeric', month: 'long' },
    }
};
 
 
 
@NgModule({
    declarations: [
 
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatCheckboxModule,
        MatRadioModule,
        MatSelectModule, //nécessite form module !
        FormsModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule,
    ],
    exports: [
        BrowserModule,
        BrowserAnimationsModule,
        MatCheckboxModule,
        MatRadioModule,
        MatSelectModule, //nécessite form module !
        FormsModule,
        MatInputModule,
        MatDatepickerModule,
        MatNativeDateModule,
    ],
    providers: [
        {
            provide: DateAdapter, useClass: CustoMatateAdapter
        },
        {
            provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS
        },
        {
            provide: MAT_DATE_LOCALE, useValue: 'fr'
        },
    ]
})
export class MaterialModule { }

J'ai en plus un problème d'heure de saisie, sur cette image je choisie un date:

-la date ne correspond pas à la saisie (orange)
-la date que j'ai choisi avec le date picker est celui qui est en rose

j'ai un décalage de 1 jours ?

Pièce jointe 368249

voici le template:

Code:

1
2
3
4
5
6
7
8
 
<mat-form-field>
  <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker  (selectedChanged)="changer($event)"></mat-datepicker>
</mat-form-field>
 
{{  matDatepicker}}

si il y a un idée pourquoi ce décalage d'une journée entre le datepicker et le champs date ?