Bagaimana untuk memiliki setidaknya dua datepickers ui-bootstrap pada satu halaman?

Saya ingin memiliki beberapa datepickers pada halaman. Tapi dengan solusi default dari UI-Bootstrap itu tidak mungkin, tidak ada salah satu dari datepickers dapat dibuka. Konflik dengan satu sama lain. Berikut ini adalah kode saya:

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

Aku hanya melakukan copy/paste dari datepicker kode dari situs http://angular-ui.github.io/bootstrap/#/datepicker. Mereka dalam konflik dengan satu sama lain. Ketika saya klik <input> lapangan untuk membuka datepicker tidak ada yang dapat dibuka dengan baik, kedua dibuka untuk kedua dan segera menghilang.

Bagaimana mungkin saya punya beberapa datepickers pada satu halaman?

Green
Pertanyaan edit 27 Oktober 2013 в 12:58
Pemrograman
angularjs datepicker angular-ui-bootstrap
27 Oktober 2013 в 12:48
13 tayangan
Mengomentari pertanyaan (5)

Daripada menggunakan sebuah fungsi yang berbeda anda dapat menggunakan berbagai lebih terbuka atribut dan kemudian lulus atribut melalui ng-klik fungsi. Anda masih perlu model yang berbeda:

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

Dan di dalam controller:

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

    $scope[opened] = true;
  };
Matthew
Jawaban edit 13 Desember 2015 в 5:27
Komentar (11)

I'm masih belajar Sudut dan UI-Bootstrap, jadi memperhitungkannya ketika membaca jawaban saya. Saya melakukan sesuatu yang mirip dengan BlueMonk, tetapi dalam cara yang fleksibel yang membuat saya controller code dari harus tahu tentang contoh datepicker pada halaman.

Saya menempatkan semua datepicker kode di controller dalam satu namespace:

$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;
}());

Dan kemudian digunakan markup berikut:

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

Ini bekerja seperti pesona untuk saya.

Komentar (5)

Ini harus bekerja (model yang berbeda, terbuka bendera, dan fungsi):

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

Dan di dalam controller:

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

    $scope.opened1 = true;
  };

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

    $scope.opened2 = true;
  };
Komentar (3)

Berikut adalah apa yang bekerja untuk saya: $id adalah id lingkup, yang disediakan oleh sudut.

    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)"/>
Komentar (0)

Tidak ada perubahan Tambahan yang diperlukan. Selama anda bungkus setiap tanggal input di dalamnya's sendiri controller div lingkup akan tinggal dengan input

Contoh:

<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>
Komentar (1)

meskipun pertanyaan lama tapi answring untuk seseorang yang jatuh ke masalah yang sama seperti yang saya lakukan.

saya ditugaskan datepicker onfocus untuk elemen itu dan itu workd besar. Sampel kode.

   $(document).on('focus','.datepicker',function(){
        $(this).datepicker();
   });
Ashutosh Raj
Jawaban edit 27 Mei 2015 в 11:29
Komentar (0)

Dapat membuka multi datepickers ui-bootstrap pada satu halaman

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