Question

我在Angular中有以下课程：

export class Company {
  id : number;  
  myDate: Date;  
}

在模板中，我有一个字符串：

<input type="text" "datepicker" name="dateStr" #dateStr="ngModel" [(ngModel)]="dateStr">

dateStr是字符串：

 private dateStr: string;

加载页面时，我有以下代码（工作正常）：

let date = new Date(this.company.founded);        
let dateStrMonth = date.getMonth() + 1;
let dateStrDay = date.getDate();        
let dateStrYear = date.getFullYear();
this.dateStr = dateStrMonth + "/" + dateStrDay + "/" + dateStrYear ;

保存公司时，我目前进行以下分析：

saveCompany(compFormDirective:FormGroupDirective) {     
     if (this.dateStr != null) {       
      this.company.myDate = new Date(this.dateStr);
     }
     ...
    }

日期实际上已保存到Java和mysql，但日期显示为day减1。例如，如果我有1/7/2002，则保存的是1/6/2002。知道要更改/添加代码以使其起作用吗？

谢谢。

Answer 1

Date构造函数采用以下格式的日期字符串。因此，在您的情况下，您传递的dateStr格式错误。

new (year: number, month: number, date?: number)

因此，您需要将dateStr传递给以下getDate方法以获取正确的日期对象

saveCompany(compFormDirective:FormGroupDirective) {     
     if (this.dateStr != null) {       
      this.company.myDate = this.getDate(this.dateStr);
     }
     ...
    }

getDate(dateStr :string): Date {
        // console.log(dateStr)
        if (dateStr !== undefined) {
            var dateParts = date.split("/");
            // console.log(dateParts)
            return new Date(dateParts[2], dateParts[0] - 1, dateParts[1]); // month is 0-based
        }
    }

希望这会有所帮助！

Answer 2

实际上，Angular中有一个与Date操作相关的内置函数，而无需执行所有实际工作。使用Angular Date Pipe及其Built-in Format Options

还提供了Stackblitz Demo Link供您参考，您也可以将其与其他日期格式一起使用。

@Component({
  ...,
  providers: [ DatePipe ]     // Add DatePipe from @angular/common
})
export class SampleComponent implement OnInit {

   dateStr: any;

   constructor(private datePipe: DatePipe) {}

   ngOnInit() {
     ...

     const companyFoundedDate = new Date(this.company.founded); 

     // So date will be in format of 03/09/2019
     this.dateStr = this.datePipe.transform(companyFoundedDate, 'MM/dd/yyyy');
   }

   saveCompany(compFormDirective: FormGroupDirective) { 
      // this.dateStr is already of Date type, you can also console it to check its value
      if (this.dateStr) this.company.myDate = this.dateStr;
   }

}

Answer 3

如果使用自定义控制器，则可以格式化MM / dd / yyyy并在后端Java中再次处理。如果使用rest存储库，则可以按以下方式使用：

Include(chatMessage => chatMessage.User)

或者：

        List<aaa> searchByAgentAndEffectiveTimeBetween(@Param("agentId")Long agentId,@Param("startDate") Date startDate, @Param("endDate") Date endDate);

Answer 4

要解决该问题，我必须在加载页面时解析为每个值字符串化：更改了此内容：

this.dateStr = dateStrMonth + "/" + dateStrDay + "/" + dateStrYear ;

对此：

this.dateStr = dateStrMonth.toString() + "\/" + dateStrDay.toString() + "\/" + dateStrYear.toString() ;

如何在Angular 5应用中正确保存日期？

4 个答案: