Comment utiliser la propriété Date avec Angular à l'aide de my-date-picker

Question

Je tente d'ajouter un champ Date à l'entrée de mon application MEAN sans utiliser la balise form. Pour m'assurer que ma solution est multiplate-forme, j'ai choisi d'utiliser le module NPM my-date-picker au lieu du input type="date" uniquement chromé (j'ai dû chercher longtemps avant de découvrir pourquoi il n'y avait pas de guides sur ce sujet).

L'idée est de définir une valeur appelée projectInstalldate et ensuite l'utiliser avec ma fonction "ajouter", qui le transmettra par exprès et au-delà. Le problème que j'ai est avec des propriétés de date. peu importe ce que j'essaie, je n'arrive pas à y avoir accès correctement. espérons-mon code vous expliquera ce que je suis en train de faire:

projects.component.ts

//imports are here 
import { IMyDpOptions } from 'mydatepicker'; 

@Component({ 
    selector: 'app-project', 
    templateUrl: '../views/projects.component.html', 
    styleUrls: [ '../styles/projects.component.css' ] 
}) 

export class ProjectsComp implements OnInit { 
    //unrelated code 
    //date: Date here? 

public myDatePickerOptions: IMyDpOptions = { 
    editableDateField: false, 
    openSelectorOnInputClick: true, 
    dateFormat: 'dd mmm yyyy' 
}; 

constructor( 
    private projectsService: ProjectsService 
) { 
    //unrelated code 
} 

//Datepicker function 
upDate(installDate: any) { 
    this.date = installDate; 
    this.newDate = this.date.toLocaleDateString(); 
} 

add(
    install_date: any 
): void { 
    this.projectsService.create(
     install_date 
    ).subscribe(project => { 
     //unrelated code 
    }); 
} 

projects.component.html

<h4>Date Templated: </h4> 
<my-date-picker [options]="myDatePickerOptions" 
    [(ngModel)]="installDate" 
    (inputFieldChanged)="upDate(installDate);" 
    ></my-date-picker> 
{{ newDate }} 
<input class="hidden" #projectInstalldate /> 

<button class="projectButton" (click)=" 
    add(
     <!-- other field values here --> 
     projectInstalldate.value 
    ); 
"> 
    Create</button> 

L'idée est d'obtenir la valeur de la my-date-picker module, puis transformer en string en utilisant upDate(). alors affichez la valeur de newDate - pour le moment oui, il devrait juste apparaître à l'intérieur {{ newDate }} donc je sais que cela fonctionne avant de définir la valeur du champ de saisie à cela. La raison pour laquelle il est configuré de cette façon est parce que j'ai plus de 30 autres champs ici et je ne veux pas le changer dans un formulaire, comme le suggère l'exemple my-date-picker. J'ai essayé d'utiliser les écoles w3 Javacsript Date de référence:

var date = new Date(); 
var newDate = date.toLocaleDateString(); 

mais cette couche juste newDate à l'heure actuelle. en essayant d'utiliser installDate à partir my-date-picker[(ngModel)] je reçois [objet objet]. Il devrait y avoir un très simple à faire, mais absolument rien que je peux trouver est d'aider. beaucoup de résultats pour transformer les chaînes en dates, mais pas l'inverse. comme vous pouvez le voir, j'essaie d'utiliser date.toLocaleDateString() mais chaque tentative que j'ai essayé de mettre en oeuvre a échoué - soit je reçois une erreur avec l'instance et ensuite je dois préfixer avec this.date.etc. et ensuite obtenir une autre erreur disant que la propriété toLocaleDateString n'existe pas sur le type date.

à la fin de mon esprit ici et j'apprécierais vraiment n'importe quoi.

Answer 1

Très bien, donc ce problème m'a empêché de faire des progrès pendant environ une semaine.

après avoir examiné la documentation moment.js j'ai découvert un peu maniable paire de supports ...

upDate(installDate: Date) { 
    this.date = new Date(installDate); 
    this.newDate = this.date.toLocaleDateString(); 
} 

et bam. maintenant je sais comment utiliser new Date() correctement. Je n'ai pas essayé cela avec my-date-picker encore pensé, j'ai testé la solution en utilisant le chrome seulement input type="date".

EDIT: alors maintenant que je l'essaie avec my-date-picker, je reçois un "date invalide" retour de ma upDate fonction. Je suppose que c'est parce que le my-date-picker renvoie quelque chose d'autre qu'un objet date. quelqu'un sait s'il y a un moyen de sortir ceci d'un ngModel?