Angular ng引导数据采集器在触发器4上设置startDate和minDate

所以，我使用ng引导数据采集器，有两种形式，startDate和endDate 我需要能够用这个做两件事：

• 当呈现“创建页面”时，将今天的日期放在开始日期上，如果呈现“编辑页面”，则从后端放置日期
• 当选择startDate时，触发minDate属性成为所选startDate

下面是我尝试的方法（现在使用硬代码，而不是从后端获取数据）

导出类ProgramFormComponent{
startDate:NgbDateStruct；
endDate:NgbDateStruct；
minEndDate:NgbDateStruct；
程序输入={
“视图类型”：“创建”，
“节目名称”：“，
“程序描述”：“，
“程序所有者”：[
''
],
“变更点ID”：“，
'startDate'：this.startDate，
“endDate”：this.endDate，
“minDate”：this.minEndDate
}
ProgramInputIt={
“视图类型”：“编辑”，
“程序标题”：“测试标题”，
“程序描述”：“测试描述”，
“程序所有者”：[
“测试所有者1”，
“测试所有者2”，
“测试所有者3”，
],
'changepointID'：'ID'，
'startDate'：this.startDate，
“endDate”：this.endDate，
“minDate”：this.minEndDate
}
构造函数（专用modalService:NgbModal）{
if（this.programInput['viewType']='Create'）{
这个。选择今天（）；
}否则{
this.startDate={年份：2017，月份：7，日期：1}；
this.endDate={年份：2017，月份：12，日期：2}；
}
}
打开（内容）{
this.modalService.open（内容，{windowClass:'dark modal'}）；
}
选择今天（）{
this.startDate={year:now.getFullYear（），month:now.getMonth（）+1，day:now.getDate（）}；
}
limitEndDate（）{
this.minEndDate=this.startDate；
}
开始日期
结束日期

---

另外，如果有人知道怎么做，我希望日历的弹出显示在页面顶部的方向，而不是底部…没有找到任何属性来设置它。

您可以在不使用属性

minDate

的情况下执行此操作，但如果需要，您可以执行以下操作。我引入了一个新变量

dataToBeUsed

（适当地命名）是我们使用的变量，因此在本例中，将其与您的代码进行比较

第一个问题，您想检查这是

Create

还是“其他东西”。我更喜欢在

OnInit

中而不是构造函数中进行初始操作。您提到如果

viewType

不是

'Create'

，您将从后端获取数据，因此

ngOnInit（）{
if（this.programInput['viewType']='Create'）{
//记住，对象是可变的
this.dataToBeUsed=this.programInput；
this.dataToBeUsed.startDate={year:new Date（）.getFullYear（），month:new Date（）.getMonth（）+1，day:new Date（）.getDate（）}；
}否则{
这个文件名为getData（）
.订阅（数据=>{
this.dataToBeUsed=数据；
})
}    
}

您希望在开始日期更改时更改

minDate

。因此，让我们使用

ngModelChange

（其余部分省略）

setMinDate

方法：

setMinDate（事件）{
this.dataToBeUsed.minDate=事件；
}

我已经从代码中删除了变量

startDate、endDate、minEndDate

因为我觉得它们没有用。我们可以在

dataToBeUsed

对象中引用相同的属性

因此，对于第二个日期选择器，如果您想禁用startdate之前的日期，我们将其标记为：

[minDate]=“dataToBeUsed.minDate”

这里有一个plunker供您参考：

太好了！很高兴听到这个消息！：）

export class ProgramFormComponent {
  startDate: NgbDateStruct;
  endDate: NgbDateStruct;
  minEndDate: NgbDateStruct;

  programInput = {
    'viewType' : 'Create',
    'programTitle' : '',
    'programDescription' : '',
    'programOwner' : [
        ''
      ],
    'changepointID' : '',
    'startDate' : this.startDate,
    'endDate' : this.endDate,
    'minDate' : this.minEndDate
  }

  programInputEdit = {
    'viewType' : 'Edit',
    'programTitle' : 'Test Title',
    'programDescription' : 'Test Description',
    'programOwner' : [
        'Test Owner 1',
        'Test Owner 2',
        'Test Owner 3',
      ],
    'changepointID' : 'ID',
    'startDate' : this.startDate,
    'endDate' : this.endDate,
    'minDate' : this.minEndDate
  }

  constructor(private modalService: NgbModal) {
    if (this.programInput['viewType'] === 'Create') {
        this.selectToday();
    } else {
        this.startDate = {year: 2017, month: 7, day: 1};
        this.endDate = {year: 2017, month: 12, day: 2};
    }
  }

  open(content) {
    this.modalService.open(content, { windowClass: 'dark-modal' });
  }

  selectToday() {
    this.startDate = {year: now.getFullYear(), month: now.getMonth() + 1, day: now.getDate()};
  }

  limitEndDate() {
    this.minEndDate = this.startDate;
  }

<form>
<div class="form-group">
            <label for="startDate" class="control-label">Start Date</label>
            <div class="input-group">
                <input class="form-control" placeholder="yyyy-mm-dd"
                     name="startDate" [(ngModel)]="programInput.startDate" ngbDatepicker #s="ngbDatepicker" firstDayOfTheWeek=1 [startDate]="programInput.startDate">
                <div class="input-group-addon" (click)="s.toggle()" >
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="startDate" class="control-label">End Date</label>
            <div class="input-group">
                <input class="form-control" placeholder="yyyy-mm-dd"
                     name="startDate" [(ngModel)]="programInput.endDate" ngbDatepicker #e="ngbDatepicker" [minDate]="programInput.minEndDate">
                <div class="input-group-addon" (click)="e.toggle()" >
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </div>
            </div>
        </div>
</form>