Question

我使用mydaterangepicker在angular 4项目的表单输入中显示日期选择器日历。

我在我的组件中使用了以下代码：

import { Component, OnInit, AfterViewInit, Input, Output, EventEmitter } from '@angular/core';
import { IMyDrpOptions } from 'mydaterangepicker';
declare let jQuery: any;
@Component({
  selector: 'form-schedule',
  templateUrl: './form-schedule.component.html',
  styleUrls: ['./form-schedule.component.css']
})

  myDateRangePickerOptions: IMyDrpOptions = {
    dateFormat: 'yyyy-mm-dd',
    sunHighlight: false,
    showClearDateRangeBtn: false,
    editableDateRangeField: false
  };

HTML

   <div class="col-sm-9">
            <div>
                    <my-date-range-picker name="daterange" [options]="myDateRangePickerOptions"
                    [(ngModel)]="scheduleModel"  (dateRangeChanged)="onDateRangeChanged($event)"></my-date-range-picker>
            </div>

    </div>

显示日期选择器的父窗体：

结束日期应大于开始日期

我只是使用mydaterangepicker模块在表单中显示datepicker字段。但日期选择器出现在点击日历的图标而不是输入字段的图标上。我没有找到任何改变此配置的解决方案。

需要帮助！

Answer 1

您可以使用属性openSelectorOnInputClick在输入字段点击上启用编辑。

mydaterangepicker angular4如何与输入字段绑定？

1 个答案: