Как правильно сохранить дату в приложении Angular 5?

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, но день отображается с днем ​​минус 1. Например, если у меня есть 1/7/2002, то, что сохраняется, - 1/6/2002. Любая идея, что я должен изменить / добавить в коде, чтобы он работал?

Спасибо.

Answer 1

если вы используете пользовательский контроллер, вы можете отформатировать MM / dd / yyyy и снова обработать его в серверной части Java.Если вы используете репозиторий отдыха, вы можете использовать, как показано ниже:

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

Или:

@ApiOperation("find XXX history filter effectDate")
@RestResource(path = "filterBetweenTime")
@Query("SELECT f FROM XXX f"
        + " WHERE (:fromDate = NULL AND :toDate = NULL)"
            + " OR (:fromDate = NULL AND f.effectiveDate <= :toDate)"
            + " OR (:toDate = NULL AND f.effectiveDate >= :fromDate)"
            + " OR (f.effectiveDate <= :toDate AND f.effectiveDate >= :fromDate))")
Page<XXX> filterXXXXRecordsBetweenTime(@DateTimeFormat(pattern = "MM/dd/yyyy")@Param("fromDate") Date fromDate, 
                                                        @DateTimeFormat(pattern = "MM/dd/yyyy")@Param("toDate") Date toDate, 
                                                        Pageable pageable);

Answer 2

На самом деле есть встроенный из Angular в отношении манипуляции с датой без необходимости выполнять всю реальную работу.Используйте Angular Date Pipe и его Встроенные параметры формата

Также предоставили 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

Конструктор даты принимает строку даты в следующем формате. Так что в вашем случае вы передаете 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 4

Чтобы решить эту проблему, я должен был проанализировать строку каждого значения при загрузке страницы: изменил это:

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

К этому:

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