web-dev-qa-db-ja.com

Angular UI月ピッカー

月ピッカーとして angular-ui-datepicker を使用しようとしています。しかし、それを設定することはできません、それをすべて試してみました。 [〜＃〜] plunker [〜＃〜] です。

モードを次のように設定しようとしました

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

また、一部として：datepicker-options、JSを使用して

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

しかし、それも機能していません。助けてください

angularjsdatepickerangular-uiangular-ui-bootstrap
19
harishr

この問題に直面している人々のために、私は多くのことを試しましたが、私が見つけた最も簡単な方法は次のとおりです：

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

秘Theは、datepicker-options="{minMode: 'month'}" datepicker-mode="'month'"をinputタグに入れます。これは私にとってはうまくいきました。

52
lvarayut

これらの行を書くだけです：

[〜＃〜] html [〜＃〜]

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

[〜＃〜] js [〜＃〜]

$scope.date = new Date();

** http://angular-ui.github.io/bootstrap/ から必要なjs/cssファイルを含めることを忘れないでください

これらの上記のコードは私のために働いた。 :)私は遅すぎることを知っていますが、それは誰かを助けるかもしれません。

19
Sariban D'Cl

私もこれを月のピッカーとして機能させることができず、さまざまなオプションを試すのに何時間も費やしました。以前にソースコードを確認したい-入力タイプが重要であることが判明します。

月の選択モードに変更するには、入力タイプを "month"に変更します。これは、ポップアップバリアントとインラインバリアントの両方で機能します。

https://angular-ui.github.io/bootstrap/ の例に従って、これを行うことができます。

<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

これを、ui-bootstrap 0.13.0から0.13.1に更新することで修正しました。これは私のマークアップです：

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

以下に私のカスタムディレクティブとhtmlを見つけてください

指令：

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

ディレクティブのtemplateUrlで使用されるdatepicker.htmlにそれぞれのコードを配置して、必要に応じてコントロールを表示してください

私のサンプル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>

私がcontorlを使用している最終ファイルの私のHTML：

<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

前の矢印と次の矢印をクリックすると、月がそれぞれ減少し、増加します

1
Sri7

上記の属性を追加しても、まだ同じ問題が発生していました。 @LVarayutの答えとの唯一の違いは、datepicker-options="date.dateOptions"属性が入力にあり、それが[〜＃〜] date [〜＃〜]pickerを静止させていた現れる。

Datepicker-optionsを削除すると、Month Pickerが有効になりました。

0
Mahesh