关闭日期选择器点击下一个日期选择器时AngularJS
问题描述:
我在我的表单中有多个日期选择器。默认情况下,这些关闭,一旦选择日期,他们再次关闭。另外,即使我不选择日期,只需点击它,它会自动关闭。关闭日期选择器点击下一个日期选择器时AngularJS
但是,当我打开第一个日期并且不要单击外部或选择某个日期,然后只需打开第二个日期选择器时,第一个日期选择器就会保持打开状态。
我该如何避免这种情况,并确保即使点击第二个日期选择器时第一个自动关闭?
<button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt')" >
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
is-open="datepicker.dt" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
</button>
<button type="button" id="dateButton" class="btn btn-default" ng-click="open($event,'dt2')" >
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt2"
is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
show-button-bar="false" readonly="readonly"/>
</button>
_
$scope.datepicker={
dt:false,
dt2:false
};
$scope.open = function($event,which) {
$event.preventDefault();
$event.stopPropagation();
$scope.datepicker[which] = true;
};
$scope.format = 'dd-MMM-yyyy';
这里是我做过什么:plnkr.co/edit/o9I3cRej9I7rZUcPpz6O?p=preview你看,如果你点击一个日期选择器,但只要按一下另外一个第一个将不会关闭
答
您正在使用is-from属性中的同名是“datepicker.dt”。 而你将'dt'传递给你的开放函数。所以,如果你有多个日期选择器的相同的HTML代码,你一起打开。
您需要为不同的datePickers定义不同的is-open名称,并且为每个datePickers定义不同的打开函数会更方便。然后,您需要的仅仅是将关联的datePicker函数的is-open属性设置为true。
\t $scope.openDt1 = function($event) {
\t \t $event.preventDefault();
\t \t $event.stopPropagation();
\t \t $scope.datepicker.dt1 = true;
\t \t };
\t $scope.openDt2 = function($event) {
\t \t $event.preventDefault();
\t \t $event.stopPropagation();
\t \t $scope.datepicker.dt1 = true;
\t \t };
<button type="button" id="dateButton" class="btn btn-default" ng-click="openDt1($event)">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
is-open="datepicker.dt1" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
</button>
<button type="button" id="dateButton" class="btn btn-default" ng-click="openDt2($event)">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt"
is-open="datepicker.dt2" min-date="minDate" max-date="maxDate" show-weeks="false" ng-required="true"
datepicker-options="dateOptions" show-button-bar="false" readonly="readonly"/>
</button>
对不起......我没有好好解释一下我的所作所为。这是我做了什么:http://plnkr.co/edit/o9I3cRej9I7rZUcPpz6O?p=preview你看看如果你点击一个日期选择器,但只需点击另一个第一个不会关闭 – Dribel 2014-10-02 13:52:07
原因是,datepicker.dt1和datepicker.dt2保持为真。当您打开dt1时,您需要将所有的datePickers的is-open属性设置为false,并且只将dt1.is打开为true。 – sansari 2014-10-03 10:32:45
对我迟到的回复感到抱歉。上周我病了。你能否给我提供一些进一步的解释?我似乎不明白如何改变功能。 – Dribel 2014-10-10 13:46:03