javascript 如何根据 AngularJS 中的 StartDate datepicker 选择值设置 EndDate datepicker 的 StartDate
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21907238/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set StartDate of EndDate datepicker based on StartDate datepicker selected value in AngularJS
提问by Karthik Bammidi
I am working on AngularJS. I am trying to dynamically generate rows when user clicks on "Add New Row" button. Here is my $scopearray variable,
我正在研究 AngularJS。当用户单击“添加新行”按钮时，我试图动态生成行。这是我的$scope数组变量，
$scope.avails = [{"Name":"","startdate":"","enddate":""}];
$scope.addNewRow=function() {
$scope.avails.push({"Name":"","startdate":"","enddate":""});
}
and here is my markup
这是我的标记
<div class="row" ng-repeat="ff in avails">
<label>Name</label>
<input type="text" ng-model="ff.Name"/>
<label>Start Date</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
</div>
<label>End Date</label>
<div class="input-group">
<span class="input-group-addon"> <i class="fa fa-calendar"></i></span>
<input type="text" class="form-control" b-datepicker name="startdate" id="startdate{{$index}}" ng-model="ff.startdate" value="{{ff.startdate}}" placeholder="Start Date" >
</div>
<div>
and I write a directivefor date picker like:
我写了一个directive日期选择器，如：
.directive('bDatepicker', function() {
return {
restrict: 'A',
require: '?ngModel',
link: function(scope, el, attr,ngModel) {
ngModel.$render = function() {
el.datepicker('update', ngModel.$viewValue || '');
};
el.datepicker({
autoclose:true,
format:'mm/dd/yyyy'
}).on('changeDate', function(value) {
var dateStrToSend = (value.date.getMonth() + 1) +'/'+value.date.getDate()+'/'+value.date.getFullYear();
scope.$apply(function () {
ngModel.$setViewValue(dateStrToSend);
});
$(".datepicker").hide();
});
}
};
})
Now I am able to create a new row when user clicks on Add NewButton, Each row contains start and end date pickers, when user select a date under start date picker, I need to set that date as startdate of corresponding end date picker.
现在我可以在用户点击Add New按钮时创建一个新行，每行包含开始和结束日期选择器，当用户在开始日期选择器下选择一个日期时，我需要将该日期设置为相应结束日期选择器的开始日期。
Since I am applying directive to element as a attribute, how to change value of another element from this directive?
由于我将指令作为属性应用于元素，如何从该指令更改另一个元素的值？
回答by esgy
This is what I used to solve the problem. Basically you set the "min" value on the end date input to the selected value of the start date.
这是我用来解决问题的方法。基本上，您将结束日期输入的“最小”值设置为开始日期的选定值。
Start Date
开始日期
<input type="text" id="start-date" class="form-control" placeholder="Start Date"
datepicker-options="UI.datepickerOptions"
datepicker-popup="yyyy-MM-dd"
ng-model="MODEL.date_start"
ng-required="true">
End Date
结束日期
<input type="text" id="end-date" class="form-control" placeholder="End Date"datepicker-options="UI.datepickerOptions"
datepicker-popup="yyyy-MM-dd"
ng-model="MODEL.date_end"
min="MODEL.date_start"
ng-required="true">
And the controller where we watch for changes on the first datepicker:
以及我们在第一个日期选择器上观察变化的控制器：
// update the end date based on the start date
$scope.$watch('MODEL.date_start', function (newVal, oldVal) {
if(!newVal) return;
// if the new start date is bigger than the current end date .. update the end date
if($scope.MODEL.date_end){
if( +$scope.MODEL.date_end < +$scope.MODEL.date_start ){
$scope.MODEL.date_end = newVal;
}
} else {
// just set the end date
$scope.MODEL.date_end = newVal;
}
});
Edit: I'm using the Angular UI Bootstrap datepicker http://angular-ui.github.io/bootstrap/#/datepicker
编辑：我正在使用 Angular UI Bootstrap datepicker http://angular-ui.github.io/bootstrap/#/datepicker
回答by Nikos Paraskevopoulos
Modify the directive to optionally take the minDateinto account. E.g.:
修改指令以选择性地minDate考虑。例如：
.directive('bDatepicker', function($parse){ // ADD DEPENDENCY ON $parse
//...other code the same...
link: function(scope, el, attr,ngModel) {
//...other code the same...
if( attr.minDate != null && attr.minDate != "" ) {
scope.$watch($parse(attr.minDate), function(newval) {
el.datepicker("option", "minDate", newval);
});
}
}
Use it as:
将其用作：
<input type="text" class="form-control" b-datepicker min-date="ff.startDate"
name="endDate" id="endDate{{$index}}" ng-model="ff.endDate"
placeholder="End Date" />
The same principle can be used for the max date as well.
同样的原则也可用于最大日期。
By the way, specifying valuewith ng-modelis redundant.
顺便说一下，指定valuewithng-model是多余的。
回答by Dinesh
Try This One
试试这个
$('#SDate').datepicker({
minDate: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onClose: function (selectedDate) {
$("#EDate").datepicker("option", "minDate", selectedDate);
}
});
$('#EDate').datepicker({
minDate: 0,
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
onClose: function (selectedDate) {
$("#SDate").datepicker("option", "maxDate", selectedDate);
}
});
