두 개 이상 있을 방법 중 한 페이지에 다테피커스 ᅴ 부트스트랩에?

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&gt &lt 다테피커 아무도 제대로 열 수 있는 두 번째, 두 가지 모두 문을 연 후 즉시 없어진다.

나는 어떻게 여러 다테피커스 5월 한 페이지에?

Green
편집된 질문27일 10월 2013 в 12:58
프로그래밍
angularjs datepicker angular-ui-bootstrap
27일 10월 2013 в 12:48
4 파운드
질문에 대한 의견 (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"/>
            <span class="glyphicon glyphicon-calendar"></span>
        </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" />
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        Submit
    </div>

및 내부 컨트롤러거:

   $scope.open = function($event,opened) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope[opened] = true;
  };
Matthew
편집된 답변13일 12월 2015 в 5:27
해설 (11)

39 m, 여전히 com/go/learn_fl_cs4_learningas2_kr i& 있는 각도 및 ᅴ 부트스트랩에 도왔으매 시행하십시오 고려하여 판독값 my answer. 비슷한 일을 할 수 있지만, 내가 내 컨트롤러거 블루몽크 유연하게 유지하는 알아야 다테피커 인스턴스의 페이지의 코드 필요가 없습니다.

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">

    </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">

    </span>
</p>

이 같은 매력을 협력했습니다 가져다줄래요.

해설 (5)

이렇게 하면 작동합니까 (다른 모델을 항목열린 플래깅, 함수):

<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"/>
            <span class="glyphicon glyphicon-calendar"></span>
        </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" />
            <span class="glyphicon glyphicon-calendar"></span>
        </div>
        Submit
    </div>

및 내부 컨트롤러거:

   $scope.open1 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened1 = true;
  };

   $scope.open2 = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened2 = true;
  };
해설 (3)

다음은 어떤 방법이 주효했는가 가져다줄래요: $ 유효범위 id, id 가 제공한 각도.

<! - begin 스니핏: js 숨기십시오: 거짓값 콘솔: 진정한 바벨. &gt 거짓값 -;

    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)"/>

끝 - &lt 스니핏 >;!

해설 (0)

추가 변경이 필요하지. 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"/>
        <span class="glyphicon glyphicon-calendar"></span>
    </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" />
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
해설 (1)

하지만 그 질문에 대한 랜스프링 표시되어도 늙은 사람이 가을 인되며 믿엇어요 비슷한 문제를 안고 있다

내가 그 요소 및 it 에 다테피커 롱포쿠스 보크트 멋지구리해요. 샘플 코드.

   $(document).on('focus','.datepicker',function(){
        $(this).datepicker();
   });
Ashutosh Raj
편집된 답변27일 5월 2015 в 11:29
해설 (0)
  • 열 수 있는 멀티 다테피커스 ᅴ 부트스트랩에) 의 한 페이지에 *

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">
해설 (0)