Question

我有一个表单，因为我有一个传递出去的字段，我只需要显示几年下降。
是否有可能只在jQuery datepicker中显示年份？否则是否有任何角度指令只显示下拉数年？

$("#date").datepicker({
  changeMonth: false,
  changeYear: true,
  dateFormat: 'dd/mm/yy',
  duration: 'fast',
  stepMonths: 0
});

小提琴：http://jsfiddle.net/LttVe/628/

Answer 1

正如评论中所建议的，如果只需要选择年份，为什么不创建一个简单的下拉列表。以下是为此创建指令的示例。

＆＃13;

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.details = { year_of_completion: null, year_of_admission: null }
}).directive('yearPicker', function() {
  return {
    scope: {
      ngModel: '=',
      startYear: '@',
      totalYears: '@'
    },
    template: '<select ng-model="ngModel" ng-options="year for year in yearsRange"></select>',
    link: function(scope) {
      scope.yearsRange = [];
      for (var i = 0; i <= scope.totalYears; i++) {
        scope.yearsRange.push(scope.startYear++)
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="MainCtrl">
    <year-picker ng-model="details.year_of_admission" start-year="1997" total-years="20"></year-picker>
    Admission year: {{details.year_of_admission}}
    <br />
    <year-picker ng-model="details.year_of_completion" start-year="1997" total-years="20"></year-picker>
    Submission year: {{details.year_of_completion}}
  </div>
</div>

＆＃13;

Answer 2

好吧这是一个黑客...用CSS（如果你添加它删除日历部分）此外，如果您需要将它仅应用于包含在div中的特定日期选择器，请添加一个类，然后将其与该类一起使用。

.ui-datepicker-calendar {
       display: none;
    }
    .ui-datepicker-month {
       display: none;
    }
    .ui-datepicker-prev{
       display: none;
    }
    .ui-datepicker-next{
       display: none;
    }

编辑：

$("#date").datepicker({
  changeMonth: false,
  changeYear: true,
  dateFormat: 'yy',
  duration: 'fast',
  stepMonths: 0,
  onChangeMonthYear: function (e) {
    console.log(e);
        $("#date").val(e);
        $('.ui-datepicker').css("display","none").blur();
  }
});

使用onChangeMonthYear事件，e我们将获得所选年份。您只需在文本中设置并隐藏日期选择器。

jQuery年选择器

2 个答案: