在Angular 6组件中从pm到am的时间转换

时间:2018-11-28 07:37:33

标签: angular datepicker datetimepicker angular-forms

我正在尝试创建一个有角度的表单,在该表单中我们有2个输入字段StartTimeEndTime。在StartTime中,如果我们输入日期和时间,则它应在Endtime中自动用“ +”表示1小时。

它工作正常,但是当它必须从am转换为pm时,它不会转换。调试时在this.endTimeValue中使用时间值是可以的,但绑定时会在视图(EndTime)中插入错误的值。

HTML文件:

<form [formGroup]="myGroup" (ngSubmit)="submit(myGroup.value)">
    <div class="row row-time">
        <div class="col-sm-5">
            <label for="StartTime">Start Time</label>
            <input type="datetime-local"  name="StartTime" class="form-control" formControlName="StartTime">
        </div>

        <div class="col-sm-5 col-sm-offset-2">
            <label for="EndTime">End Time</label>
            <input type="datetime-local"  name="endTime1" class="form-control" formControlName="EndTime" readonly>
        </div>
    </div>

    <div class="row">
        <button type="submit" class="btn">
            Submit Query
        </button>
    </div>
</form>

组件文件(ts):

myGroup: FormGroup;
startTimeValue: any;
endTimeValue : string ;

constructor(private formbuilder:FormBuilder, 
              private datePipe: DatePipe) { }

ngOnInit() {
  this.myGroup = this.formbuilder.group({
    TableName:['', Validators.required],
    CorrelationId:['', Validators.required],
    StartTime:[null, Validators.required],
    EndTime:[null, Validators.required],
    ClientName:['', Validators.required]
  });
}


submit(form){
  this.startTimeValue = form.StartTime;
  var time = this.startTimeValue;

  if(time !== null)
  {
    debugger;
    var x = new Date(time);
    x.setHours(x.getHours() + 1);
    this.endTimeValue = x.LocaleString();
    debugger;
    this.myGroup.patchValue({
      EndTime: this.datePipe.transform(this.endTimeValue,"yyyy-MM-ddThh:mm",'+0530')
    })
  }
}

1 个答案:

答案 0 :(得分:0)

您可以看一下moment.js

这是moment.js的链接 https://momentjs.com/

您需要使用以下命令进行安装: npm安装时刻--save

然后您可以开始转换用户键入的输入,例如:

var a = moment('2018-11-21');
a.format('LT');   // 8:59 AM
a.format('LTS');  // 8:59:09 AM