web-dev-qa-db-fra.com

Comment avoir au moins deux datepickers de ui-bootstrap sur une seule page?

Je veux avoir plusieurs datepickers sur une page. Mais avec la solution par défaut de UI-Bootstrap, ce n'est pas possible, aucun des datepickers ne peut être ouvert. Le conflit les uns avec les autres. Voici mon code:

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

Je viens de faire un copier/coller du code datepicker sur le site http://angular-ui.github.io/bootstrap/#/datepicker . Ils sont en conflit les uns avec les autres. Lorsque je clique sur le champ <input> pour ouvrir un sélecteur de date, personne ne peut être ouvert correctement. Les deux sont ouverts pendant une seconde et disparaissent immédiatement.

Comment puis-je avoir plusieurs datepickers sur une seule page?

angularjsdatepickerangular-ui-bootstrap
42
Green

Plutôt que d'utiliser une fonction différente, vous pouvez utiliser un attribut is-open différent, puis le transmettre via la fonction ng-click. Vous avez encore besoin de différents modèles:

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

Et à l'intérieur du contrôleur:

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

    $scope[opened] = true;
  };
79
BlueMonk

J'apprends encore Angular et UI-Bootstrap, alors prenez cela en compte lors de la lecture de ma réponse. J'ai fait quelque chose de similaire à BlueMonk, mais d'une manière souple qui empêche mon code de contrôleur de connaître les instances du sélecteur de date sur la page.

J'ai mis tout le code datepicker de mon contrôleur dans un seul espace de noms:

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

Et puis utilisé le balisage suivant:

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

Cela a fonctionné comme un charme pour moi.

15
Jerry Benson-Montgomery

Cela devrait fonctionner (différents modèles, drapeau ouvert et fonctions):

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

Et à l'intérieur du contrôleur:

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

    $scope.opened1 = true;
  };

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

    $scope.opened2 = true;
  };
10
Kath

Peut ouvrir plusieurs datepickers de ui-bootstrap sur une seule page

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
TinhNQ

bien que ce soit une vieille question, mais répondre à quelqu'un qui tombe dans le même problème que moi.

j'ai assigné le onfocus Datepicker à cet élément et ça a fonctionné très bien ...

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

Aucune modification supplémentaire n'est nécessaire. Tant que vous saisissez chaque entrée de date dans son propre contrôleur, la portée restera avec cette entrée

Exemple:

<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

Voici ce qui a fonctionné pour moi: $ Id est scope, fourni par angular.

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

0
Amr Ellafy