Discussion :

[keokaz]

Bonjour,

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

voici mon app module:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[keokaz]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Marco46]

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

[keokaz]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

voici mon nouveau module

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 {
 
}

[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.

[keokaz]

ok, merci .

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ...