Javascript 角度UI引导日期选择器动态日期（变量）

我正在使用并创建一个包含两个日期选择器的表单。第一个是今天的日期或我们可以选择的日期，第二个是第一天加上一周，7天

我可以让他们最初是正确的

$scope.first=新日期（）；
$scope.second=new Date（）.setDate（new Date（）.getDate（）+7）

但是，如果我更改第一个日期选择器的日期，第二个日期选择器将不会做任何更改。我发现
{{dt|date:'fullDate'}}
捕获动态日期。我的问题是如何将第一个DatePicker的日期作为变量并在.js文件中进行操作？然后，只要第一个日期发生变化，我就可以在第二个日期选择器中添加+7天

快速解决方案。在第一次约会时使用观察者。每当第一个日期发生变化时，第二个日期将增加7天


angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
angular.module（'ui.bootstrap.demo'）.controller（'DatepickerDemoCtrl'，function（$scope）{
$scope.today=函数（）{
$scope.dt=新日期（）；
};
$scope.today（）；
$scope.clear=函数（）{
$scope.dt=null；
};
$scope.dateOptions={
年份：“yy”，
maxDate：新日期（2020年5月22日），
minDate:新日期（），
开始日期：1
};
$scope.open1=函数（）{
$scope.popup1.opened=true；
};
$scope.popup1={
开放：假
};
log（$scope.dt）；
$scope.secondDate=new Date（）.setDate（new Date（）.getDate（）+7）
$scope.$watch（'dt'，函数（newVal，oldVal）{
变量日期=$scope.dt
$scope.secondDate=新日期（Date）.setDate（新日期（Date）.getDate（）+7）
})
});

.全按钮跨度{
背景色：柠檬黄；
边界半径：32px；
颜色：黑色；
}
.部分按钮跨度{
背景颜色：橙色；
边界半径：32px；
颜色：黑色；
}
所选日期为：{dt|date:'fullDate'}
第二个日期是：{secondDate | date:'fullDate'}
弹出窗口


快速解决方案。在第一次约会时使用观察者。每当第一个日期发生变化时，第二个日期将增加7天


angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
angular.module（'ui.bootstrap.demo'）.controller（'DatepickerDemoCtrl'，function（$scope）{
$scope.today=函数（）{
$scope.dt=新日期（）；
};
$scope.today（）；
$scope.clear=函数（）{
$scope.dt=null；
};
$scope.dateOptions={
年份：“yy”，
maxDate：新日期（2020年5月22日），
minDate:新日期（），
开始日期：1
};
$scope.open1=函数（）{
$scope.popup1.opened=true；
};
$scope.popup1={
开放：假
};
log（$scope.dt）；
$scope.secondDate=new Date（）.setDate（new Date（）.getDate（）+7）
$scope.$watch（'dt'，函数（newVal，oldVal）{
变量日期=$scope.dt
$scope.secondDate=新日期（Date）.setDate（新日期（Date）.getDate（）+7）
})
});

.全按钮跨度{
背景色：柠檬黄；
边界半径：32px；
颜色：黑色；
}
.部分按钮跨度{
背景颜色：橙色；
边界半径：32px；
颜色：黑色；
}
所选日期为：{dt|date:'fullDate'}
第二个日期是：{secondDate | date:'fullDate'}
弹出窗口


如果你在找两个日期选择器。如果在许多地方（页面）有相同的案例，则可以将其作为指令


angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
angular.module（'ui.bootstrap.demo'）.controller（'DatepickerDemoCtrl'，function（$scope）{
$scope.today=函数（）
{
$scope.dt=新日期（）；
};
$scope.today（）；
$scope.clear=函数（）
{
$scope.dt=null；
};
$scope.dateOptions=
{
年份：“yy”，
maxDate：新日期（2020年5月22日），
minDate:新日期（），
开始日期：1
};
$scope.open1=函数（）
{
$scope.popup1.opened=true；
};
$scope.popup2={}；
$scope.open2=函数（）
{
$scope.popup2.opened=true；
};
$scope.popup1={
开放：假
};
$scope.$watch（'dt'，函数（val，old）
{
$scope.opened=false；
$scope.secondDate=new Date（）.setDate（new Date（val）.getDate（）+7）；
});
log（$scope.dt）；
});

.全按钮跨度{
背景色：柠檬黄；
边界半径：32px；
颜色：黑色；
}
.部分按钮跨度{
背景颜色：橙色；
边界半径：32px；
颜色：黑色；
}
所选日期为：{dt|date:'fullDate'}
弹出窗口





如果你在找两个日期选择器。如果在许多地方（页面）有相同的案例，则可以将其作为指令


angular.module（'ui.bootstrap.demo'，['ngAnimate'，'ui.bootstrap']）；
angular.module（'ui.bootstrap.demo'）.controller（'DatepickerDemoCtrl'，function（$scope）{
$scope.today=函数（）
{
$scope.dt=新日期（）；
};
$scope.today（）；
$scope.clear=函数（）
{
$scope.dt=null；
};
$scope.dateOptions=
{
年份：“yy”，
maxDate：新日期（2020年5月22日），
minDate:新日期（），
开始日期：1
};
$scope.open1=函数（）
{
$scope.popup1.opened=true；
};
$scope.popup2={}；
$scope.open2=函数（）
{
$scope.popup2.opened=true；
};
$scope.popup1={
开放：假
};
$scope.$watch（'dt'，函数（val，old）
{
$scope.opened=false；
$scope.secondDate=新日期（）.setDate（新日期