web-dev-qa-db-fra.com

Sélecteur de mois de l'interface utilisateur angulaire

J'essaie d'utiliser angular-ui-datepicker comme sélecteur de mois. Mais pas capable de le configurer, j'ai tout essayé. Voici le PLUNKER .

J'ai essayé de définir les modes comme

          <input type="text" class="form-control col-md-3" 
          datepicker-popup="MMM-yyyy" min-mode="'month'" datepicker-mode="'month'"
          ng-model="dt" is-open="opened" close-on-date-selection="true"
          datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 
          show-button-bar="false" show-weeks="false"/>
          <span class="input-group-btn">
            <button class="btn btn-default" ng-click="open($event)">
              <i class="glyphicon glyphicon-calendar"></i>
            </button>
          </span>

Et aussi dans le cadre de: datepicker-options, en utilisant JS comme

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

Mais cela ne fonctionne pas non plus. S'il vous plaît aider

angularjsdatepickerangular-uiangular-ui-bootstrap
18
harishr

Pour les personnes confrontées à ce problème, j'ai essayé beaucoup de choses et voici la méthode la plus simple que j'ai trouvée:

<input type="text" class="form-control" datepicker-popup="MM/yyyy" ng-model="dt" is-open="opened" datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"/>
<span class="input-group-btn">
    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>

L'astuce consiste à mettre datepicker-options="{minMode: 'month'}" datepicker-mode="'month'" dans la balise input. CA marchait bien pour moi. 

49
lvarayut

Il suffit d'écrire ces lignes: 

HTML

 <datepicker ng-model="date" min-mode="month" datepicker-mode="'month'"></datepicker>

JS

$scope.date = new Date();

** N'oubliez pas d'inclure les fichiers js/css nécessaires depuis http://angular-ui.github.io/bootstrap/

Ce code ci-dessus a fonctionné pour moi. :) Je sais que c'est trop tard, mais cela peut aider quelqu'un.

19
Sariban D'Cl

Je ne pouvais pas le faire fonctionner comme un sélecteur de mois non plus, j'ai passé des heures à essayer différentes options. Je souhaite avoir vérifié le code source plus tôt - il s'avère que le type de saisie est la clé.

Pour passer en mode sélecteur de mois, changez le type d'entrée en "mois". Cela fonctionne pour les variantes en incrustation et en ligne.

En suivant l'exemple sur https://angular-ui.github.io/bootstrap/ , vous pouvez le faire:

<input type="month" class="form-control" datepicker-popup ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" 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)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
5
Max Naude

J'ai corrigé cela en mettant à jour de ui-bootstrap 0.13.0 à 0.13.1. Ceci est mon balisage:

<input type="text" ng-model="DOB" datepicker-popup="MM-dd-yyyy" datepicker-mode="'year'" is-open="dobOpen" ng-click="dobOpen = true" />
4
John H

Veuillez trouver ci-dessous ma directive personnalisée et html

Directif:

angular.module('myModule')
    .directive('myDatepicker', function () {
        return {
            restrict: 'E',
            replace: true,
            controller: DatePickerController,
            controllerAs: 'vm',
            scope: {
                dt: '=',
                datestyle: '@',
                datepickermode: '@',
                minmode: '@',
                mindate: '=',
                maxdate: '='
            },
            link: function (scope, $scope, $element) {

            },
            templateUrl: './datepicker.html'
        };
    })
    .controller('DatePickerController', DatePickerController);

DatePickerController.$inject = ['$scope'];

function DatePickerController($scope) {

    var vm = this;
    if ($scope.datepickermode) {
        vm.DatepickerMode = $scope.datepickermode;
    } else {
        vm.DatepickerMode = 'day';
    }

    if ($scope.minmode) {
        vm.MinMode = $scope.minmode;
    } else {
        vm.MinMode = 'day';
    }

    if ($scope.mindate) {
        vm.MinDate = new Date($scope.mindate);
    } else {
        vm.MinDate = new Date('1000/01/01');
    }

    if ($scope.maxdate) {
        vm.MaxDate = new Date($scope.maxdate);
    } else {
        vm.MaxDate = new Date('9999/12/31');
    }

    vm.dateOptions = {
        datepickerMode: vm.DatepickerMode,
        minMode: vm.MinMode,
        minDate: vm.MinDate,
        maxDate: vm.MaxDate
    };

    vm.openCalendar = function () {
        if (!$scope.dt) {
            $scope.dt = new Date(Date.now());
        }
        vm.dateOptions = {
            datepickerMode: vm.DatepickerMode,
            minMode: vm.MinMode,
            minDate: vm.MinDate,
            maxDate: vm.MaxDate
        };
        vm.popupCalendar.opened = true;
    };

    vm.popupCalendar = {
        opened: false
    };

    vm.changeValue = function () {
        vm.popupCalendar.opened = true;
    };

    vm.prev = function () {
        refreshDate(-1);
    };

    vm.next = function () {
        refreshDate(1);
    };

    function refreshDate(cnt) {
        var buf = new Date($scope.dt);
        var bufDate = buf.getDate();
        var bufMonth = buf.getMonth();
        var bufYear = buf.getFullYear();
        var changeDate;

        switch (vm.MinMode) {
            case 'day':
                bufDate = bufDate + cnt;
                changeDate = new Date(bufYear, bufMonth, bufDate);
                break;
            case 'month':
                bufMonth = bufMonth + cnt;
                changeDate = new Date(bufYear, bufMonth, '01');
                break;
            case 'year':
                bufYear = bufYear + cnt;
                changeDate = new Date(bufYear, 0, 1);
                break;
        }
        if (changeDate >= vm.MinDate && changeDate <= vm.MaxDate) {
            $scope.dt = changeDate;
        }
    }
}

Veuillez placer votre code respectif dans datepicker.html utilisé dans le templateUrl de la directive pour afficher le contrôle selon vos besoins.

Mon exemple datepicker.html:

<a type="button" class="btn btn-default btn-black btn-sm" name="day-before" ng-click="vm.prev()"><i class="fa fa-caret-left"></i></a>
        <input type="text" uib-datepicker-popup="{{datestyle}}" ng-model="dt" class="btn btn-default btn-black btn-sm datetime-change input-day"
               is-open="vm.popupCalendar.opened" ng-required="true" ng-click="vm.openCalendar()"
               datepicker-options="vm.dateOptions" show-button-bar="false" show-weeks="false" close-on-date-selection="true" readonly />
        <a type="button" class="btn btn-default btn-black btn-sm" name="day-after" ng-click="vm.next()"><i class="fa fa-caret-right"></i></a>

Mon HTML dans le fichier final où j'utilise le contorl: 

<my-datepicker dt="vm.requestDate"  //bind this to your controller
 datepickermode="month"
 minmode="month"
 datestyle="yyyy/MM"
 mindate="vm.MinDate" maxdate="vm.MaxDate"/>

 This is how it looks

Au clic des flèches précédente et suivante, le mois décroît et s’incrémente

1
Sri7

J'avais toujours les mêmes problèmes malgré l'ajout des attributs mentionnés ci-dessus. La seule différence que j'avais avec la réponse de @ LVarayut était que j'avais l'attribut datepicker-options="date.dateOptions" dans l'entrée, ce qui faisait que leDATEpicker apparaissait toujours.

La suppression des options de datepicker a activé le sélecteur de mois.

0
Mahesh