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

#angular #typescript #date

#angular #typescript #Дата

Вопрос:

У меня есть следующий класс в Angular:

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

В шаблоне у меня есть строка:

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

dateStr — это typestring:

  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.
Есть идеи, что мне следует изменить / добавить в код, чтобы он заработал?

Спасибо.

Комментарии:

1. что вы получаете, когда делаете console.log(this.dateStr) ?

2. console.log(this.dateStr) ничего не отображается.

3. какое значение имеет это свойство this.company.founded . консоль. запишите это и поделитесь с нами

Ответ №1:

Конструктор Date принимает строку даты в следующем формате. Итак, в вашем случае вы передаете dateStr неправильный формат.

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

Итак, вам нужно передать dateStr следующему getDate методу, чтобы получить правильный объект date

 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
        }
    }
  

Надеюсь, это поможет!

Ответ №2:

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

Для справки также была предоставлена демонстрационная ссылка на Stackblitz, которую вы можете воспроизводить и с другими форматами даты.

 @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;
   }

}
  

Ответ №3:

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

         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);
  

Ответ №4:

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

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

К этому:

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