DateフィーチャーとAngular with my-date-pickerの使用方法

Question

formタグを使用せずにMEANアプリケーションの入力にDateフィールドを追加しようとしています。私のソリューションがクロスプラットフォームであることを保証するために、クロム専用input type="date"の代わりにNPMモジュールmy-date-pickerを使用することを選択しました（私はこれについてのガイドがない理由を知るまで、長い時間を捜す必要がありました）。

考えられるのは、projectInstalldateという値を設定して、それを私の "add"関数で使って、それを明示的に渡すことです。私が抱えている問題は、Dateプロパティです。私が何を試みても、私は彼らに適切にアクセスできないようです。うまくいけば、私のコードは、私がやろうとしていますかを説明します：

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> 

アイデアはmy-date-pickerから値を取得することですモジュールを開き、upDate()を使用してstringになります。 newDateの値を表示します - 現時点では{{ newDate }}の中に表示されるはずですので、入力フィールドの値を設定する前に動作していることがわかります。

このように設定されている理由は、ここに30以上のフィールドがあり、フォームに変更したくないためです。my-date-pickerのようなものです。私はw3の学校Javacriptを使ってみました日付参考：

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

しかし、これは現在の時刻にnewDateを設定するだけです。私はmy-date-pickerの[(ngModel)]からinstallDateを使用しようとすると[object Object]を取得します。これを行うには本当に簡単にする必要がありますが、私が見つけることができるものは絶対に何も役立っていません。文字列を日付に変換するための結果はたくさんありますが、それ以外の方法はありません。あなたは私がdate.toLocaleDateString()を使用しようとしているが、それを実装しようとしたあらゆる方法が失敗した - 私はインスタンスでエラーを取得し、this.date.etc.と接頭辞をつけて、プロパティを言う別のエラーを取得する必要がありますtoLocaleDateStringは存在しませんタイプdateです。

私の知恵はここで終わり、本当に感謝します。

Answer 1

申し訳ありませんが、この問題により、私は約1週間進歩を止めています。私は、ブラケットの便利な小さなペアを発見しmoment.jsのドキュメントを見た後に

...

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

とBAM。今私はnew Date()を正しく使用する方法を知っています。私はmy-date-pickerとこれを試していないが、私はクロムのみinput type="date"を使用してソリューションをテストしたと思った。

編集：今私はmy-date-pickerで試しているので、私はupDate関数から "無効な日付"の戻り値を取得します。これは、my-date-pickerが日付オブジェクト以外のものを返すためです。誰かがngModelからこれを取得する方法があるかどうかを知っていますか？