Angular Create Dynamic year dropdown

Question

I want to create a year selection dropdown. year must start from this year upto next 7 years .

I have tried

var year = new Date().getFullYear();
var range = [];

range.push(year);

for (var i = 1; i < 7; i++) {
    range.push(year + i);
}

$scope.years = range;

<select class="form-control"  ng-options="year for year in years" name="expiryMonth" ng-model="expiryMonth" required>'

But this creates a html ,

<option label="2016" value="number:2016">2016</option>

this creates a required year dropdown But i want Value to be last two digits of label

Also, my first option should be like

<option value="">select month</option>

Don't understand. Value of your model is the same as label. See this Plunker plnkr.co/edit/ygxpfIlheIhGE8MvUIIR?p=preview — gauss
– gauss, Commented Nov 23, 2016 at 10:12

Stark Buttowski · Accepted Answer · 2016-11-23 10:12:06Z

angular.module('app', [])
    .controller("Ctrl",
    function contactListCtrl($scope) {

       var year = new Date().getFullYear();
    var range = [];
    range.push(year);
    for (var i = 1; i < 7; i++) {
        range.push(year + i);
    }
    $scope.years = range;


    });

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="[email protected]" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>

    <script src="script.js"></script>
</head>

<body ng-controller="Ctrl">

<select class="form-control" ng-model="expiryMonth" required>
  <option>Select month</option>
  <option ng-repeat="year in years">{{year}}</option>
  </select>
</body>

</html>

myeongkil kim · Accepted Answer · 2021-02-26 17:36:52Z

2

This will give you a useful dynamic year range.

let years: number[] = [];
let currentYear: number = new Date().getFullYear();
for(let i = (currentYear - 7); i < (currentYear + 7); i++) {
    years.push(i);
}

edited Feb 26, 2021 at 17:36

myeongkil kim

2,5964 gold badges18 silver badges24 bronze badges

answered Feb 25, 2021 at 19:26

Francois Stander

638 bronze badges

Comments

gauss · Accepted Answer · 2016-11-23 10:37:53Z

1

If you want that value will be only last two digits of label you can extend your years object like:

var year = new Date().getFullYear();
var range = [];

for (var i = 0; i < 7; i++) {
    range.push({
      label: year + i,
      value: parseInt(String(year + i).slice(2, 4))
    });
}

$scope.years = range;

And ng-options like:

ng-options="year.value as year.label for year in years"

See this Plunker

edited Nov 23, 2016 at 10:37

answered Nov 23, 2016 at 10:10

gauss

17712 bronze badges

Comments

Ryan Searle · Accepted Answer · 2016-11-23 09:45:06Z

0

Consider using ng-repeat to create your <option>

<select class="form-control" name="expiryMonth" ng-model="expiryMonth" required>
    <option value="">select month</option>
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

answered Nov 23, 2016 at 9:45

Ryan Searle

1,6271 gold badge20 silver badges30 bronze badges

2 Comments

user4676340 Over a year ago

It is recommended to use ng-options actually.

Ryan Searle Over a year ago

1. I never said anywhere that ng-repeat is recommended over ng-options 2. Why over complicate your code just to use recommended functionality...

Michalmw · Accepted Answer · 2016-11-23 09:46:02Z

0

For dates and times in angular i often use:

'uib-datepicker'

More information: https://angular-ui.github.io/bootstrap/

In this directive you can use 'min-date'

 <input type="text" starting-day="0"  uib-datepicker="{{format}}" ng-model="vm.dateFrom" is-open="true" min-date="vm.minDate" max-date="vm.dateTo"  />

And in your controller:

vm.minDate = yourFunctionToDate()

answered Nov 23, 2016 at 9:46

Michalmw

133 bronze badges

Comments

user4676340 · Accepted Answer · 2016-11-23 10:13:18Z

0

I made you a fiddle that you can find here

Basically, use the expression track by to give the value you want to your options.

answered Nov 23, 2016 at 10:13

user4676340

Comments

rocambille · Accepted Answer · 2016-11-23 13:07:31Z

0

Try this instead:

<select ng-model="expiryMonth">
    <option ng-repeat="year in years" value="{{year}}">{{year}}</option>
</select>

edited Nov 23, 2016 at 13:07

rocambille

16.2k12 gold badges54 silver badges71 bronze badges

answered Nov 23, 2016 at 12:52

Satya Prakash

112 bronze badges

Collectives™ on Stack Overflow

Angular Create Dynamic year dropdown

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related