[Angular 5] Mise en place datepicker

**keokaz** · 01/04/2018, 19h02

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** · 01/04/2018, 22h27

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** · 02/04/2018, 16h56

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

**keokaz** · 03/04/2018, 10h21

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** · 03/04/2018, 10h45

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** · 06/04/2018, 14h00

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

**keokaz** · 07/04/2018, 09h17

j'ai trouvé ce que je voulais

Code :

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

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

**keokaz** · 07/04/2018, 22h58

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

Nom : tanslate.jpg
Affichages : 5035
Taille : 65,2 Ko

Nom : tanslate.jpg
Affichages : 5035
Taille : 65,2 Ko

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 :

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

Nom : rdv.png
Affichages : 4908
Taille : 67,7 Ko

Nom : rdv.png
Affichages : 4908
Taille : 67,7 Ko

voici le template:

Code :

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

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 ?

[Angular 5] Mise en place datepicker

Angular

Discussions similaires

Partager

Partager