更改日期输入字段格式的角度 [英] Change Date input field format in angular

问题描述

我有一个用于编辑表单的输入字段，当我单击编辑时应该给我一个日期。从我的春季后端，我得到一个长格式的日期，例如。 164888330000。如果将输入类型更改为text，我将获得date的长值，但我想以yyyy-mm-dd格式获取日期，因为这是我存储日期的方式。不幸的是，据我所知，不能在输入中使用角形管道

I have an input field for an edit form which is supposed to give me a date when I click edit. From my spring back end I am getting a date in a long format eg. 164888330000. If I change the input type to text, I will get the long value of date but I want to get the date in the format yyyy-mm-dd because this is how I store my dates. Unfortunately, angular pipes cant be used in input as I understand

<label class="form-control-label" *ngIf="truckForm.get('date').invalid && processValidation"
                       [ngClass]="'error'"
                       for="purchasedDate">date is required.</label>
                <input formControlName="date"
                       id="purchasedDate"
                       class="form-control"
                       type="date"
                       name="purchasedDate"
                       [(ngModel)]="truck.purchasedDate"/><strong>Purchased Date</strong>
              </div

我在组件类中使用formGroup。有没有一种方法可以将日期转换为所需的格式，然后将其显示在UI中？在angular.js中，可以使用新的Date（long）进行转换，但是我不确定如何在angular 4中实现它。

I am using formGroup here in my component class. Is there a way to convert the date to my desired format before they are shown in the UI? In angular.js it was possible to use new Date(long) and convert it but I'm not sure how to achieve this in angular 4

  @Input() truck: Truck;
 truckForm = new FormGroup({
    truckCode: new FormControl('', Validators.required),
    date: new FormControl('', Validators.required),
    descriptions: new FormControl('', Validators.required)
  });
 processForm() {

    this.processValidation = true;
    if (this.truckForm.invalid) {
      return; //Validation failed, exit from method.
    }

    // if we are here then all good
    this.preProcessConfigurations()

    let truckCode = this.truckForm.get('truckCode').value.trim();
    let date = this.truckForm.get('date').value.trim();
    let description = this.truckForm.get('descriptions').value.trim();

    //this.dateString = new Date(this.truck.purchasedDate);

    let truck = new Truck(this.truck.truckId, truckCode, date , description);

    this.truckService.updateTrucks(truck).subscribe(successCode => {
      this.statusCode = successCode;
      this.router.navigate(['/trucks']);
    }, errorCode => this.statusCode = errorCode);


  }

这是一个更新功能，所以我会想要以yyyy-mm-dd格式接收日期，对我如何完成日期有任何帮助吗？

This is an update function so I would like to receive the date in a yyyy-mm-dd format , any help on how I can accomplish that?

推荐答案

我是不确定您要寻找的内容，但是，如果使用json，则可以在属性的Spring Date中使用注释 @JsonFormat（pattern = yyyy-MM-dd）。

I am not sure what you are looking for, however, if you work with json it is possible to format it using in the attribute Date of spring the annotation @JsonFormat (pattern = "yyyy-MM-dd").

@JsonFormat(pattern = "yyyy-MM-dd")
private Date date;

这篇关于更改日期输入字段格式的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！