如何使用我，日期選擇器

我試圖添加日期字段我MEAN應用程序的輸入，而不使用form標籤使用與角日期屬性。爲了確保我的解決方案是跨平臺我選擇使用NPM模塊my-date-picker代替鉻唯一input type="date"（我不得不尋找了很久，直到我發現了，這是爲什麼有沒有這方面的指南）。如何使用我，日期選擇器

的想法是成立一個名爲projectInstalldate值，然後用我的「添加」功能，使用它，將它傳遞通快遞和超越。我遇到的問題是日期屬性。無論我嘗試什麼，我似乎都無法正確訪問它們。希望我的代碼將解釋什麼，我試圖做的：

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學校javacsript日期參考：

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

但這只是將newDate設置爲當前時間。嘗試使用installDate從my-date-picker的[(ngModel)]我得到[對象對象]。這樣做應該是非常簡單的，但我絕對沒有辦法找到幫助。將字符串轉換爲日期的結果很多，但不是相反的結果。你可以看到我想要使用date.toLocaleDateString()但每次這樣，我一直試圖實現它已經失敗 - 我要麼得到一個錯誤與實例，然後有this.date.etc.前綴，然後讓另一個錯誤說屬性toLocaleDateString不存在開機類型date。

在我束手無策這裏，真的希望任何事情。

來源

2017-10-10 KuroKyo

好的，所以這個問題一直阻止我在一週內取得進展。

看着爲moment.js的文件後，我發現了一個方便的小支架對...

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

和巴姆。現在我知道如何正確使用new Date()。我還沒有試過這個，my-date-picker還沒有想過，我使用鍍鉻只有input type="date"測試瞭解決方案。

編輯：現在，我正在嘗試它與my-date-picker，我得到一個「無效日期」從我的upDate函數返回。我認爲這是因爲my-date-picker正在返回日期對象以外的東西。任何人都知道是否有一種方法可以從ngModel中獲取此信息？

來源

2017-10-10 01:59:20 KuroKyo

如何使用我，日期選擇器

回答

相關問題