Question

我正在尝试在不使用form标记的情况下向我的MEAN应用输入添加日期字段。为了确保我的解决方案是跨平台的，我选择使用NPM模块my-date-picker而不是仅限铬input type="date"（我必须搜索很长时间，直到我发现这就是为什么有没有这方面的指南）。

我们的想法是设置一个名为projectInstalldate的值，然后将其与我的“添加”功能一起使用，该功能将通过express和more传递它。我遇到的问题是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模块中获取值，然后使用string转换为upDate()。然后显示newDate的值 - 此刻它应该只显示在{{ newDate }}内部所以我知道它在我将输入字段的值设置为之前有效。

这样设置的原因是因为我在这里有30多个其他字段，我不想将其更改为表单，如my-date-picker示例所示。我尝试使用w3学校Javacsript日期参考：

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

但这只是将newDate设置为当前时间。在尝试使用installDate的{{1}} my-date-picker时，我得到[object Object]。应该有一个非常简单的事情，但我绝对没有找到任何帮助。将字符串转换为日期的结果很多，但不是相反。你可以看到我正在尝试使用[(ngModel)]，但我试图实现它的每一种方式都失败了 - 我得到了一个错误的实例，然后必须用date.toLocaleDateString()作为前缀然后得到在this.date.etc.类型上不存在属性toLocaleDateString的另一个错误。

在我的智慧结束时，我会非常感激。

Answer 1

好吧，所以这个问题一直阻止我在一周内取得任何进展。

看了一下文档。我发现了一对方便的小方括号......

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中获取这个？

如何使用my-date-picker

1 个答案: