Angular UI 月份选择器

Posted 2023-05-07

【中文标题】Angular UI 月份选择器

【英文标题】：Angular UI month picker

【发布时间】：2014-07-07 09:14:45

【问题描述】：

我正在尝试使用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"   ;

但这也行不通。请帮忙

【问题讨论】：

它似乎工作正常。您的输入字段中有datepicker-popup="MMM-yyyy" 的datepicker-popup 属性，该属性显示您选择日期时的月份和年份。如果您也想显示当天，请使用datepicker-popup="dd-MMM-yyyy" 作为datepicker-popup 属性。

它显示的是一个月，没关系.. 但是当弹出窗口打开时它显示一个日期选择器而不是月份选择器......

看到这个codepen.io/anon/pen/gmqrH

已经看到...但是在弹出窗口中打开日期时它不起作用

是的，目前看来它仅在用作内联日期选择器时才受支持，但不支持弹出日期选择器

【参考方案1】：

对于那些面临这个问题的人，我已经尝试了很多东西，这是我找到的最简单的方法：

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

诀窍是您必须将datepicker-options="minMode: 'month'" datepicker-mode="'month'" 放入input 标记中。这对我来说很好。

【讨论】：

呃，终于有办法了。谢谢！ AngularUI 中的这个日期选择器组件完全不能正常工作。

【参考方案2】：

只要写下这几行：

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

上面的这些代码对我有用。 :) 我知道为时已晚，但它可能对某些人有所帮助。

【参考方案3】：

我通过从 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" />

【讨论】：

这是对使用 ~0.13.0 版本的任何人的修复

【参考方案4】：

我也无法让它作为月份选择器工作，我花了几个小时尝试不同的选项。希望我早点检查源代码 - 结果输入类型是关键。

要将其更改为月份选择器模式，请将输入类型更改为“月”。这适用于弹出式和内联式变体。

按照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】：

请在下面找到我的自定义指令和 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"/>

点击上一个和下一个箭头，月份分别递减和递增

【讨论】：

你能看看这个问题吗：***.com/questions/59122863/…。我有麻烦了。请帮忙。

【参考方案6】：

尽管添加了上述属性，我仍然遇到同样的问题。我与@LVarayut 的回答的唯一区别是我在输入中有datepicker-options="date.dateOptions" 属性，这导致DATE picker 仍然出现。

删除日期选择器选项启用月份选择器。

【参考方案7】：

你可以试试multiple-month-picker

它可以帮助您选择多个月份。它是一个 AngularJS 小部件，因此对您来说应该很方便。

我在下面提到了如何在你的项目中实现它。

HTML

<input type="text" multiple-month-picker />

JS

//Initiate your app module and inject 'mmp-morfsys'
var app = angular.module('app-name', ['mmp-morfsys']);

就这么简单！！

【讨论】：

答案与问题无关