我在角度專案中使用jquery-datetimepicker 。但是當我在日期選擇器中選擇日期時，該值不會系結到表單控制元件。
我試過了。
app.component.ts
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
myForm: FormGroup;
constructor(private fb: FormBuilder) {
this.myForm = this.fb.group({
startDate: ['', Validators.required],
});
}
onSubmit() {
console.log('value: ', this.myForm.value);
console.log('the whole form and its controls: ', this.myForm);
}
ngOnInit() {
(window as any).$('.pickDateOneTimeStartDate').datetimepicker({
allowInputToggle: true,
timepicker: false,
format: 'M d, Y',
minDate: Date.now,
scrollMonth: false,
scrollInput: false,
});
}
}
app.component.html
<form class="form-horizontal" [formGroup]="myForm" (ngSubmit)="onSubmit()">
<hello [myForm]="myForm"></hello>
<button type="submit">Submit</button>
</form>
你好.component.ts
import { Component, Input } from '@angular/core';
import {
FormGroup,
FormControl,
FormBuilder,
Validators,
} from '@angular/forms';
@Component({
selector: 'hello',
template: `
<div [formGroup]="myForm">
<div >
<input formControlName="startDate" aria-label="Start Date" [ngClass]="{
'is-invalid':
myForm.controls['startDate'].errors
}" >
<div *ngIf="myForm.hasError('required', 'startDate')" >
This field is required
</div>
</div>
</div>
`,
styles: [`h1 { font-family: Lato; }`],
})
export class HelloComponent {
@Input() myForm: FormGroup;
ngOnInit() {}
}
stackblitz實作
當我在日期選擇器上添加 onChangeDateTime 時，表單物件中的值會更新，但仍不會顯示在輸入框中。
更新：
var self = this;
(window as any).$('.pickDateOneTimeStartDate').datetimepicker({
allowInputToggle: true,
timepicker: false,
format: 'M d, Y',
minDate: Date.now,
scrollMonth: false,
scrollInput: false,
onChangeDateTime: function (dp, $input) {
self.myForm.value.startDate = $input.val();
},
});
輸出：
{
"startDate": "Jun 30, 2022"
}
uj5u.com熱心網友回復：
只需更改功能
onChangeDateTime: function (dp, $input) {
self.myForm.controls.startDate.setValue($input.val());
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493646.html
標籤：jQuery 有角度的 日期时间选择器 jquerydatetimepicker
上一篇：選擇當前懸停的div