web-dev-qa-db-ja.com

単一ページに少なくとも2つのui-bootstrapのdatepickerを設定する方法は？

1ページに複数の日付ピッカーが必要です。しかし、UI-Bootstrapのデフォルトのソリューションでは不可能であり、datepickerのいずれも開くことができません。お互いの対立。ここに私のコードがあります：

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

サイトからdatepickerコードのコピー/貼り付けを行いました http://angular-ui.github.io/bootstrap/#/datepicker 。それらは互いに衝突します。 <input>フィールドをクリックしてdatepickerを開くと、だれも正しく開くことができません。両方とも1秒間開かれ、すぐに消えます。

1つのページに複数の日付ピッカーを配置するにはどうすればよいですか？

angularjsdatepickerangular-ui-bootstrap
42
Green

別の関数を使用する代わりに、別のis-open属性を使用してから、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;
  };
79
BlueMonk

私はまだAngularとUI-Bootstrapを学んでいるので、答えを読むときはそれを考慮に入れてください。BlueMonkに似た何かをしましたが、コントローラーのコードがページ上の日付ピッカーのインスタンスについて知っている。

コントローラーのすべてのdatepickerコードを単一の名前空間に入れました。

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

これは私にとって魅力的でした。

15
Jerry Benson-Montgomery

これは機能するはずです（異なるモデル、オープンフラグ、および機能）：

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

これが私のために働いたものです：$ idは、angularによって提供されるスコープ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)"/>
1
Amr Ellafy

1つのページでui-bootstrapの複数の日付ピッカーを開くことができます

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
Tính Ngô Quang

それは古い質問ですが、私と同じ問題に陥った人のために答えています。

私はその要素にdatepicker onfocusを割り当て、それはうまく機能しました。サンプルコード。

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

追加の変更は必要ありません。各日付入力を独自のコントローラー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>
0
Zanderi