Comment changer le format de date de ngbDatepicker de JSON à YYYY/MM/DD

Question

Je travaille avec ngbDatepicker qui me donne un format de date JSON comme :

{ year: 2019, month: 6, day: 9 }

Comment puis-je convertir ces données en AAAA/MM/JJ ? J'utilise Angular 7.

Mon code est le suivant :

<div class="input-group">
   <input class="form-control" placeholder="YYYY-MM-DD"
          (click)="d2.toggle()" (ngModelChange)="onDateSelection($event,'ToDate');"  name="d2" #c2="ngModel" [(ngModel)]="toDate" ngbDatepicker #d2="ngbDatepicker">
         <div class="input-group-append">
          <button class="btn btn-outline-secondar" 
             (click)="d2.toggle()" type="button">
           <i class="fa fa-calendar" aria-hidden="true"></i>
          </button>
         </div>
 </div>

Answer 1

Il y a deux classes importantes pour gérer ngbDate : une pour formater la date : DateParserFormater, et une autre pour changer la valeur que vous recevez/envoyez de/vers un ngb-datepicker : DateAdapter.

Vous pouvez donc créer un customDateAdapter et un customDateParserFormatter. Mais ne vous préoccupez pas des noms : il n'y a que deux classes injectables, comme par exemple

Pour customDateAdapter

@Injectable()
export class CustomDateAdapter {
  fromModel(value: string): NgbDateStruct
  {
     if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]}
  }

  toModel(date: NgbDateStruct): string // from internal model -> your mode
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)
           +"/"+('0'+date.day).slice(-2):null
  }
}

Oui, une classe injectable avec deux fonctions, l'une pour transformer une NgbDate en chaîne et l'autre pour transformer une chaîne en NgbDate. N'oubliez pas que cela modifie votre "modèle".

Pour CustomDateParserFormatter

@Injectable()
export class CustomDateParserFormatter {
  parse(value: string): NgbDateStruct
  {
    if (!value)
      return null
     let parts=value.split('/');
     return {year:+parts[0],month:+parts[1],day:+parts[2]} as NgbDateStruct

  }
  format(date: NgbDateStruct): string
  {
    return date?date.year+"/"+('0'+date.month).slice(-2)+"/"+('0'+date.day).slice(-2):null
  }
}

Il s'agit à nouveau d'une classe injectable avec deux fonctions, l'une pour transformer une NgbDate en chaîne de caractères et l'autre pour transformer une chaîne de caractères en NgbDate. N'oubliez pas que cela change le "format" de la date - utile si vous le souhaitez, par exemple jj/MM/aaaa -.

Il suffit ensuite d'ajouter les fournisseurs dans votre composant

  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
              {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]

Dans le cadre de la stackblitz voir la définition du composant, vous pouvez choisir, par exemple

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: NgbDateNativeAdapter}]
})

ou

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateAdapter, useClass: CustomDateAdapter},
          {provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

même vous pouvez écrire

@Component({
  selector: 'ngbd-datepicker-adapter',
  templateUrl: './datepicker-adapter.html',
  providers: [{provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter}]
})

Pour gérer les objets comme {année, mois, jour}, mais en changeant le "masque" - et la façon dont vous saisissez la date

NOTE : Vous pouvez également ajouter les fournisseurs au module.

Answer 2

Ce qu'il vous faut, c'est

var date = object.year + '/' + object.month + '/'+ object.day

Answer 3

Si vous utilisez un champ de date, vous devez lier le modèle dans le fichier ts. Dans le fichier html, appelez la méthode dateselect comme suit

 (dateSelect)="onDateSelect($event)"

Code complet :

 <input class="form-control"(dateSelect)="onDateSelect($event)"  id="TargetDate" placeholder="mm/dd/yyyy" name="targetDate" ngbDatepicker
          #date="ngbDatepicker"  />
          <div class="input-group-append">
            <button id="TargetDateButton" class="btn btn-outline-secondary" (click)="date.toggle()" type="button">
              <span class="oi oi-calendar"></span>
            </button>
          </div>

Dans le type script, utilisez le code suivant, uniquement si vous utilisez le sélecteur Ngbdate.

 onDateSelect(event) {
  let year = event.year;
  let month = event.month <= 9 ? '0' + event.month : event.month;;
  let day = event.day <= 9 ? '0' + event.day : event.day;;
  let finalDate = year + "-" + month + "-" + day;
 }