Comment utiliser le sélecteur de données Angular UI Bootstrap sous forme simple?

j'ai un formulaire où il y a un besoin pour moi d'avoir 2 ou plusieurs champs de date pour différentes choses. J'ai essayé le bootstrap D'UI angulaire qui fonctionne très bien quand je n'ai que 1 date champ dans la forme. Mais il cesse de fonctionner si j'ai plusieurs champs de date et je ne sais pas la méthode la plus facile pour obtenir cela pour travailler.

Ceci est mon exemple HTML:

 <label>First Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dt" ng-model="formData.dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>      

 <label>Second Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" name="dtSecond" ng-model="formData.dtSecond" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>     

Mon JS est:

myApp.controller('DatePickrCntrl', function ($scope) {

      $scope.today = function() {
        $scope.formData.dt = new Date();
      };
      $scope.today();

      $scope.showWeeks = true;
      $scope.toggleWeeks = function () {
        $scope.showWeeks = ! $scope.showWeeks;
      };

      $scope.clear = function () {
        $scope.dt = null;
      };

      // Disable weekend selection
      $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
      };

      $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
      };
      $scope.toggleMin();

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

        $scope.opened = true;
      };

      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      $scope.format = $scope.formats[0];

});

j'ai mis en œuvre en fonction de la taille de l'échantillon ici. Le problème que j'ai ici est:

1) Lorsque l'un des champs date est cliqué, le pop-up datepicker est désordonné et semble afficher 2 datepicker en 1.

2) Quand j'enlève is-open="opened" attribut, la fenêtre pop-up semble fonctionner correctement. Mais sans is-open="opened", le ng-click="open($event) car le bouton ne fonctionne pas.

3) puisque chacun des champs de date a des modèles ng différents, Je ne peux pas définir de date par défaut pour tous les champs de date sauf le premier avec ng-model="formData.dt"

La seule solution à long façon de résoudre ce que je peux penser est de séparer le contrôleur pour chaque champ date.

je voudrais savoir comment d'autres implémentent plusieurs champs de date dans 1 forme elle-même en utilisant L'interface D'amorçage D'UI angulaire.

24
demandé sur Muhammed 2014-03-08 17:29:12
la source

6 ответов

j'ai 30 en une forme un contrôleur aucun problème. utilisez le même concept si vous en avez besoin sur ng-repeat.

 <label>First Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" 
            name="dt" ng-model="formData.dt" is-open="datepickers.dt" 
            datepicker-options="dateOptions" ng-required="true" 
            close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,'dt')">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>      

 <label>Second Date</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}" 
            name="dtSecond" ng-model="formData.dtSecond" 
            is-open="datepickers.dtSecond" datepicker-options="dateOptions" 
            ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,'dtSecond')">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>     

myApp.controller('DatePickrCntrl', function ($scope) {
      $scope.datepickers = {
        dt: false,
        dtSecond: false
      }
      $scope.today = function() {
        $scope.formData.dt = new Date();

        // ***** Q1  *****
        $scope.formData.dtSecond = new Date();
      };
      $scope.today();

      $scope.showWeeks = true;
      $scope.toggleWeeks = function () {
        $scope.showWeeks = ! $scope.showWeeks;
      };

      $scope.clear = function () {
        $scope.dt = null;
      };

      // Disable weekend selection
      $scope.disabled = function(date, mode) {
        return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
      };

      $scope.toggleMin = function() {
        $scope.minDate = ( $scope.minDate ) ? null : new Date();
      };
      $scope.toggleMin();

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

        $scope.datepickers[which]= true;
      };

      $scope.dateOptions = {
        'year-format': "'yy'",
        'starting-day': 1
      };

      $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'shortDate'];
      $scope.format = $scope.formats[0];

});


 // ***** Q2 ***** somemodel can be just an array [1,2,3,4,5]
 <div ng-repeat="o in somemodel">
 <label>Date Label</label>  
    <div class="input-group">
     <input type="text" class="form-control" datepicker-popup="{{format}}"
            name="dt{{o}}" ng-model="datepickers.data[o]" 
            is-open="datepickers.isopen[o]" datepicker-options="datepickers.option" 
            ng-required="true" close-text="Close" />
      <span class="input-group-btn">
        <button class="btn btn-default" ng-click="open($event,o)">
            <i class="glyphicon glyphicon-calendar"></i></button>
      </span>
    </div>
  </div>


myApp.controller('DatePickrCntrl', function ($scope) {

      $scope.datepickers = {
        data: {},
        options: {
            'year-format': "'yy'",
            'starting-day': 1
        },
        isopen: {}
      }
      $http.get("get/data/for/some/model", function(result) {
         $scope.somemodel = result;
         for (var i = 0; i < result.length; i++) {
           $scope.datepickers.isopen[result] = false;
           $scope.datepickers.data[result] = new Date(); //set default date.
         }
      });

  // fill in rest of the function
});
42
répondu wayne 2014-07-18 15:46:25
la source

Solution Plus Simple. Nécessite seulement modding le HTML et peut être utilisé dans un ng-repeat si vous le souhaitez. Il suffit d'être créatif avec ce que vous appelez l'ouvert

glissez ceci dans votre Controller:

$scope.calendar = {
    opened: {},
    dateFormat: 'MM/dd/yyyy',
    dateOptions: {},
    open: function($event, which) {
        $event.preventDefault();
        $event.stopPropagation();
        $scope.calendar.opened[which] = true;
    } 
};

HTML:

<div class="form-group row">
    <div class="col-lg-6">
        <label for="formDOB">Date of Birth</label>
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.birthDate" is-open="calendar.opened.dob" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Date of Birth" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="calendar.open($event, 'dob')"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
    <div class="col-lg-6">
        <label for="formWinDate">Win Date</label>
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{calendar.dateFormat}}" ng-model="record.winDate" is-open="calendar.opened.win" datepicker-options="calendar.dateOptions" close-text="Close" placeholder="Win DAte" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="calendar.open($event, 'win')"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
19
répondu geilt 2014-07-12 13:17:56
la source

wayne's réponse est grande. Je tiens seulement à ajouter, que vous pouvez faire à la fonction "open ()" mieux:

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

    $scope.closeAll();
    datePicker.opened = true;
};

Et puis vous avez à l'utiliser comme ça:

ng-click="open($event, dateFrom)"

dateFrom est votre ng-model (c'est à dire que vous utilisez $champ d'application.dateFrom).

EDIT: $scope.closeAll(); est une fonction qui ferme tous les datePickers. Il peut être écrit comme ça:

$scope.closeAll = function() {
    $scope.dateFrom.opened = false;
    $scope.dateTo.opened = false;
};
5
répondu Mateusz Rasiński 2017-05-23 15:09:42
la source

je préférerais ne pas mélanger ng-model avec les informations de L'interface utilisateur.Pour cela, il est nécessaire de définir un tableau pour stocker les drapeaux d'ouverture, ainsi que de vérifier si le curseur de données est ouvert ou non.

de plus, j'ai modifié le comportement' open 'en' toggle ' à la place, afin de permettre de fermer le curseur de données avec le bouton.

Voici mon controller:

$scope.toggleOpenDatePicker = function($event,datePicker) {
   $event.preventDefault();
   $event.stopPropagation();
   $scope[datePicker] = !$scope[datePicker];
};

Ensuite, il peut être utilisé comme:

<input type="text" class="form-control" ng-model="model.date1" is-open="date1" />
   <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="toggleOpenDatePicker($event,'date1')"><i class="glyphicon glyphicon-calendar"></i>      
      </button>
   </span>

l'idée de $ scope a été empruntée à ici:

2
répondu Toni Gamez 2017-05-23 15:02:06
la source

j'ai résolu mon problème en utilisation ce plongeur avec des modifications mineures.

HTML

<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[0]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event, 0)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>
    <h4>Popup</h4>
<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[1]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event, 1)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
</div>

et dans le contrôleur

$scope.openDatePickers = [];
$scope.open = function ($event, datePickerIndex) {
   $event.preventDefault();
   $event.stopPropagation();

   if ($scope.openDatePickers[datePickerIndex] === true) {
      $scope.openDatePickers.length = 0;
   } else {
      $scope.openDatePickers.length = 0;
      $scope.openDatePickers[datePickerIndex] = true;
   }
};

mes modifications

a la place des nombres (0 ou 1) j'utilise $index angulaire ng-repeat.

comme ceci:

is-open="openDatePickers[**$index**]"

ng-click="open($event, **$index**)"

<p class="input-group">
   <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="openDatePickers[$index]" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">
   <span class="input-group-btn">
      <button type="button" class="btn btn-default" ng-click="open($event, $index)"><i class="glyphicon glyphicon-calendar"></i></button>
   </span>
</p>
1
répondu Morteza QorbanAlizade 2016-08-23 23:50:30
la source

je l'ai utilisé dans une manière différente, et il semble un peu plus facile pour moi. J'utilisais l'une des approches mentionnées, mais j'étais trop paresseux pour créer des tonnes de calendriers puisque j'exécutais une boucle sans avoir d'identifiant statique. Donc cette solution est seulement valide pour vous, si vous voulez créer beaucoup de calendriers à l'intérieur d'une ng-repeat. Espérons que cela aide!

C'est le contrôleur

       $scope.datepickers = {
            data: {},
            isopen: {}
       }
       // setting the defaults once
       for (var i = 0; i < $scope.array.length; i++) {
            $scope.datepickers.isopen[i] = false;
            $scope.datepickers.data[i] = new Date();
        }

        // aso..

        $scope.valuationDatePickerOpen = function($event, index) {
          if ($event) {
            $event.preventDefault();
            $event.stopPropagation();
          }
          $scope.datepickers.isopen[index] = true;
        };

et C'est le HTML coupé dans ma boucle

<!-- ng-repeat="entry in array track by $index" --> 

<input type="text" class="form-control" 
       datepicker-popup="dd-MMMM-yyyy" 
       is-open="datepickers.isopen[$index]"
       ng-click="valuationDatePickerOpen($event, $index)"
       ng-model="entry.date" />
0
répondu djnose 2015-10-14 13:42:06
la source