使用Angular材质初始化日期时间范围选择器

时间:2020-05-22 04:15:22

标签: angular8 datetimepicker daterangepicker two-way-binding

页面加载后,我想设置日期范围。日期范围选择器来自下面的链接。 https://www.npmjs.com/package/saturn-datepicker

因此,我可以看到默认的两周值将其发送到chart并在日期范围选择器上显示该日期范围。我怎么做?我无法成功使用下面的代码。

打字稿

    form: FormGroup;
    inlineRange;
    sendingDate: any;
    @Output() sendDateEmitter = new EventEmitter<any>();
    moment = extendMoment(Moment);
    ngOnInit() {
        let today = Moment();
        let twoWeeksAfter = Moment().add(-14, "days");
        let range = this.moment.range(today, twoWeeksAfter);

        this.sendingDate = range;


    } 
    constructor(fb: FormBuilder) {
        this.form = fb.group({
            date: new FormControl("date"),
            // date: [{ begin: new Date(2018, 7, 5), end: new Date(2018, 7, 25) }],
        });
    }
    DateChanged(value) { 
        this.sendingDate = value;
    }

html

<div class="row">
    <div class="col-xl-4">
        <mat-form-field class="flex-container">
            <div [formGroup]="form">
                <input
                   [(ngModel)]="sendingDate"
                    matInput
                    placeholder="Choose a date"
                    [satDatepicker]="picker2"
                    formControlName="date"
                    (dateChange)="DateChanged($event.value)"

                />
            </div>
            <sat-datepicker #picker2 [rangeMode]="true"> </sat-datepicker>
            <sat-datepicker-toggle

                matSuffix
                [for]="picker2"
            ></sat-datepicker-toggle>
        </mat-form-field>
    </div>
</div>

<div class="row">
    <!-- ----------------------------------------------------------------------- -->
    <!--                              chart fields                               -->
    <!-- ----------------------------------------------------------------------- -->

    <div class="col-xl-6 chartPadding">
        <h4 class="text-center">Chart1</h4>
        <kt-chart1 [receivingDate]="form.get('date')?.value"></kt-chart1>
    </div>

</div>

0 个答案:

没有答案