I want to 페이지에서 다테피커스 여러 개 있습니다. 뿐만 아니라 기본값입니다 솔루션은 ᅴ 부트스트랩에 수 없으며, 아무도 다테피커스 의 열 수도 있습니다. 서로 충돌. 이것은 내 코드:
<div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
<button class="btn" ng-click="open()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
그냥 다테피커 다테피커 사이트 (http://angular-ui.github.io/bootstrap/) 의 코드 (# / 복사 / 붙여넣기 못했다. 그들은 서로 충돌하면. When I 필드 ',' 를 열고, input> < 다테피커 아무도 제대로 열 수 있는 두 번째, 두 가지 모두 문을 연 후 즉시 없어진다.
나는 어떻게 여러 다테피커스 5월 한 페이지에?
다른 기능을 사용하지 않고 사용할 수 있습니다 '속성' 다른 '에서' 기능을 통해 ng 를 열려 속성 및 전달하는 것입니다. 다른 모델을 여전히 필요합니다.
<div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open($event,'opened1')"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
<button class="btn" ng-click="open($event,'opened2')"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
및 내부 컨트롤러거:
$scope.open = function($event,opened) {
$event.preventDefault();
$event.stopPropagation();
$scope[opened] = true;
};
I put my 컨트롤러거 모든 코드를 다테피커 하나의 네임스페이스:
$scope.datePicker = (function () {
var method = {};
method.instances = [];
method.open = function ($event, instance) {
$event.preventDefault();
$event.stopPropagation();
method.instances[instance] = true;
};
method.options = {
'show-weeks': false,
startingDay: 0
};
var formats = ['MM/dd/yyyy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
method.format = formats[0];
return method;
}());
사용 후 다음 수정표시:
<p class="input-group">
<input type="text" class="form-control" ng-model="editableEmployee.dateHired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateHired']" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateHired')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<input type="text" class="form-control" ng-model="editableEmployee.dateFired" datepicker-popup="{{datePicker.format}}" datepicker-options="datePicker.options" is-open="datePicker.instances['dateFired']" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="datePicker.open($event, 'dateFired')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
이 같은 매력을 협력했습니다 가져다줄래요.
이렇게 하면 작동합니까 (다른 모델을 항목열린 플래깅, 함수):
<div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt1" is-open="opened1" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open1()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt2" is-open="opened2" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
<button class="btn" ng-click="open2()"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
및 내부 컨트롤러거:
$scope.open1 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened1 = true;
};
$scope.open2 = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened2 = true;
};
다음은 어떤 방법이 주효했는가 가져다줄래요: $ 유효범위 id, id 가 제공한 각도.
<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. > 거짓값 -;
ctrl.opened = {};
ctrl.openDatatimePicker = function ($event, id) {
$event.preventDefault();
$event.stopPropagation();
ctrl.opened[id] = true;
}
<input type="text"
class="form-control"
uib-datepicker-popup="{{vm.datepickerFormat}}"
ng-model="x.FraDato"
is-open="vm.opened[$id]"
datepicker-options="vm.datepickerOptions"
ng-required="true"
ng-click="vm.openDatatimePicker($event,$id)"/>
끝 - < 스니핏 >;!
추가 변경이 필요하지. As long as you wrap 입력되는 각 데이트였어 it& # 39 의 범위에 있는 div İç 컨트롤러거 입력입니다 설치할 예정입니다.
예:
<div ng-controller="DatepickerDemoCtrl">
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true"/>
<button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
</div>
<div ng-controller="DatepickerDemoCtrl">
<div class="form-horizontal pull-left">
<input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
<button class="btn" ng-click="open($event)"><span class="glyphicon glyphicon-calendar"></span></button>
</div>
</div>
하지만 그 질문에 대한 랜스프링 표시되어도 늙은 사람이 가을 인되며 믿엇어요 비슷한 문제를 안고 있다
내가 그 요소 및 it 에 다테피커 롱포쿠스 보크트 멋지구리해요. 샘플 코드.
$(document).on('focus','.datepicker',function(){
$(this).datepicker();
});
JS
$scope.open = {};
$scope.openCalendar = function (e, date) {
e.preventDefault();
e.stopPropagation();
if ($scope.open[date] === true) {
$scope.open = {};
} else {
$scope.open = {};
$scope.open[date] = true;
}
};
HTML
<input type="text" id="created1" name="created1" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created1')" placeholder="0000/00/00 00:00" is-open="open.created1" autocomplete="off" class="form-control" ng-model="vm.condition.created1">
<input type="text" id="created2" name="created2" datetime-picker="" datepicker-options="dateOptions" timepicker-options="timeOptions" ng-click="openCalendar($event, 'created2')" placeholder="0000/00/00 00:00" is-open="open.created2" autocomplete="off" class="form-control" ng-model="vm.condition.created2">