한 페이지에 UI 부트스트랩의 날짜 피커를 두 개 이상 표시하는 방법

한 페이지에 UI 부트스트랩의 날짜 피커를 두 개 이상 표시하는 방법

한 페이지에 데이트 피커를 여러 개 붙이고 싶어요.그러나 UI-Bootstrap의 기본 솔루션에서는 날짜 피커를 열 수 없습니다.서로간의 갈등.코드는 다음과 같습니다.

<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/ #/datepicker 사이트에서 Datepicker 코드를 복사/복사했습니다.그들은 서로 충돌한다.클릭했을 때<input>날짜 선택기를 여는 필드에는 아무도 제대로 열 수 없습니다. 둘 다 잠시 열렸다가 바로 사라집니다.

어떻게 하면 한 페이지에 여러 개의 데이트 피커를 넣을 수 있을까요?

다른 기능을 사용하는 대신 다른 기능을 사용할 수 있습니다.is-openAtribute를 경유하여 Atribute를 전달합니다.ng-click기능.여전히 다른 모델이 필요합니다.

<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;
  };

아직 Angular와 UI-Bootstrap을 배우고 있으니 참고해서 답안을 읽어주세요.BlueMonk와 비슷한 작업을 수행했지만 컨트롤러 코드가 페이지에 있는 날짜 피커의 인스턴스를 알 필요가 없도록 유연하게 처리했습니다.

컨트롤러의 모든 날짜 선택 코드를 단일 네임스페이스에 넣습니다.

$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는 angular로 제공되는 scope id입니다.

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

추가 변경은 필요하지 않습니다.각 날짜 입력을 자체 컨트롤러 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>

비록 오래된 질문이지만 나와 같은 문제에 빠진 사람에게는 대답할 수 있다.

나는 그 요소에 날짜 선택자를 포커스로 할당했고, 그것은 잘 작동했다.샘플 코드

   $(document).on('focus','.datepicker',function(){
        $(this).datepicker();
   });

UI 부트스트랩의 여러 날짜 피커를 한 페이지에서 열 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/19613510/how-to-have-at-least-two-datepickers-of-ui-bootstrap-on-a-single-page