angular 1.5 如何创建年份选择器下拉菜单

Posted 2023-05-09

【中文标题】angular 1.5 如何创建年份选择器下拉菜单

【英文标题】：angular 1.5 how to create year picker dropdown

【发布时间】：2017-09-01 15:31:42

【问题描述】：

我是 Angular 1 的新手，需要实现 Angular 日期选择器以仅允许年份选择器（毕业年份），它应该是从当年到 1950 年。

我尝试使用 jQuery，但它不起作用，而且它似乎与 Angular 不兼容。

请建议如何在 Angular 1.5 中实现它。当前的实现来自硬编码的 JSON 对象。

【问题讨论】：

如果你想使用现有的东西，有一些替代方案：material.angularjs.org/latest/api/directive/mdDatepicker

【参考方案1】：

我为您制作了这个 plnkr，希望对您有所帮助。

两个输入，带引导程序。

<input type="text" class="form-control date" id="from" placeholder="From" ng-click="app.dateFrom=true" datepicker-popup="app.format" ng-model="app.dtFrom" is-open="app.dateFrom" min-date="1970-04-06" max-date="'2017-04-06'" datepicker-options="myapp.dateOptions"
        date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">


<input type="text" class="form-control date" id="to" placeholder="To" ng-click="app.dateTo=true" datepicker-popup="app.format" ng-model="myapp.dtTo" is-open="app.dateTo" min-date="1970-04-06" max-date="'2017-04-07'" datepicker-options="app.dateOptions"
        date-disabled="disabled(date, mode)" ng-required="true" close-text="Close">

还有剧本

angular.module('myapp', ['ui.bootstrap']);
angular.module('myapp').controller('myappCtrl', function() 

  self = this;
  self.someProp = 'Calendar'
  self.opened = ;
  self.open = function($event) 

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = ;
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  ;

  self.format = 'dd-MM-yyyy'
);

问候！！

http://plnkr.co/edit/dphcFn4ghgCQqPqRxUhi?p=preview

【讨论】：

谢谢，我们只有几年的下拉菜单。我们不要求仅以 yyyy 格式输入 4 位数年份的月份和日期作为下拉菜单。

试试这个plnkr.co/edit/dphcFn4ghgCQqPqRxUhi?p=preview。只有年，没有月，没有日。希望这对您有所帮助。问候！

谢谢你是救命稻草 :)

【参考方案2】：

你需要做一个如下的指令

var app = angular.module('myApp', []);
app.directive('datepicker', function () 
return 
    restrict: 'C',
    require: 'ngModel',
     link: function (scope, element, attrs, ngModelCtrl) 
            $(element).datepicker(
                dateFormat: 'dd, MM, yy',
                onSelect: function (date) 
                    scope.date = date;
                    scope.$apply();
                
            );
            
    Y;
);

取自How to use datepicker in AngularJS using custom directive as a class?