webentwicklung-frage-antwort-db.com.de

Angular UI-Monatswähler

Ich versuche, angle-ui-datepicker als Monatsauswahl zu verwenden. Aber nicht in der Lage, es zu konfigurieren, hat alles versucht. Hier ist der PLUNKER .

Ich habe versucht, die Modi als einzustellen

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

Und auch als Teil von: Datepicker-Optionen mit JS als

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

Das funktioniert aber auch nicht. Bitte helfen

18
harishr

Für die Menschen, die mit diesem Problem konfrontiert sind, habe ich viele Dinge ausprobiert und hier die einfachste Methode, die ich gefunden habe:

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

Der Trick ist, dass Sie datepicker-options="{minMode: 'month'}" datepicker-mode="'month'" in das Tag input einfügen müssen. Das hat gut für mich funktioniert. 

49
lvarayut

Schreiben Sie einfach diese Zeilen: 

HTML

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

JS

$scope.date = new Date();

** Vergessen Sie nicht, notwendige js/css-Dateien von http://angular-ui.github.io/bootstrap/ einzuschließen. _

Der obige Code hat für mich funktioniert. :) Ich weiß, es ist zu spät, aber es kann jemandem helfen.

19
Sariban D'Cl

Ich konnte auch nicht dazu kommen, als Monatsauswahl zu arbeiten, und habe stundenlang verschiedene Optionen ausprobiert. Ich wünschte, ich hätte den Quellcode früher geprüft - der Eingabetyp ist der Schlüssel.

Um in den Monatsauswahlmodus zu wechseln, ändern Sie den Eingabetyp in "Monat". Dies funktioniert sowohl für Popup- als auch für Inline-Varianten.

Aus dem Beispiel auf https://angular-ui.github.io/bootstrap/ können Sie Folgendes tun:

<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

Dies wurde durch ein Update von ui-bootstrap 0.13.0 auf 0.13.1 behoben. Das ist mein Markup:

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

Hier finden Sie meine benutzerdefinierte Direktive und HTML

Richtlinie:

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

Fügen Sie Ihren entsprechenden Code in datepicker.html ein, der in der templateUrl der Direktive verwendet wird, um das Steuerelement Ihren Anforderungen entsprechend anzuzeigen

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

Meine HTML-Datei in der endgültigen Datei, in der ich das Contorl verwende: 

<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

Beim Klicken auf die vorherigen und nächsten Pfeile werden die Monatseinschränkungen bzw. -schritte erhöht

1
Sri7

Ich hatte immer noch die gleichen Probleme, obwohl ich die oben genannten Attribute hinzugefügt hatte. Der einzige Unterschied, den ich gegenüber der von @ LVarayut hatte, war, dass ich datepicker-options="date.dateOptions"-Attribut in der Eingabe hatte, wodurch derDATEpicker immer noch angezeigt wurde.

Durch das Entfernen der Datepicker-Optionen wurde der Month Picker aktiviert.

0
Mahesh