load date year day drop down using angular js issue

Question

I am trying to load day,year,month using angular js. currently i have two problems. first one is, i need to add "--select--" option for my all drop downs. other thing is month name should be in the drop down without number. how i do these changes.

 <div>
  Year : <select ng-model="SelectedYear" ng-options="label for label in Years" ng-change="UpdateNumberOfDays()"></select>
</div>
<div>
  Month: <select ng-model="SelectedMonth" ng-options="label for label in Months" ng-change="UpdateNumberOfDays()"></select>
</div>
<div>
  Day: <select ng-model="SelectedDay" ng-options="label for label in Days | limitTo:NumberOfDays"></select>
</div>

Please check my demo

Demo

Aashiq Otp · Accepted Answer · 2021-03-04 05:47:03Z

Two thing to change in your code is : in your script.js

var months = $.map($(Array('jan','feb' , 'mar' ,'apr' ,'may','june','jul','Aug','Sept','Oct','Nov','Dec')), function (val, i) { return val; });

previously use are using 12 arrays and just return its index ie i.

also add a <option value="">-- choose State --</option></select> inside Select tag

// Code goes here

(function () {
    var myApp = angular.module('MyApp', []);

    myApp.controller('BirthdayController', ['$scope', function ($scope) {

        var numberOfYears = (new Date()).getYear() - 10;
        var years = $.map($(Array(numberOfYears)), function (val, i) { return i + 1900; });
        var months = $.map($(Array('jan','feb' , 'mar' ,'apr' ,'may','june','jul','Aug','Sept','Oct','Nov','Dec')), function (val, i) { return val; });
        var days = $.map($(Array(31)), function (val, i) { return i + 1; });

        var isLeapYear = function () {
            var year = $scope.SelectedYear || 0;
            return ((year % 400 === 0 || year % 100 !== 0) && (year % 4 === 0)) ? 1 : 0;
        }

        var getNumberOfDaysInMonth = function () {
            var selectedMonth = $scope.SelectedMonth || 0;
            return 31 - ((selectedMonth === 2) ? (3 - isLeapYear()) : ((selectedMonth - 1) % 7 % 2));
        }

        $scope.UpdateNumberOfDays = function () {
            $scope.NumberOfDays = getNumberOfDaysInMonth();
        }

        $scope.NumberOfDays = 31;
        $scope.Years = years;
        $scope.Days = days;
        $scope.Months = months;
    }]);
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.4.0-beta.5" src="https://code.angularjs.org/1.4.0-beta.5/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="MyApp">
  <div class="ng-scope" ng-controller="BirthdayController">
    <h1>Birthday Validator</h1>
    <div>
      Year : <select ng-model="SelectedYear" ng-options="label for label in Years" ng-change="UpdateNumberOfDays()">
        <option value="">-- choose Year --</option>
        </select>
    </div>
    <div>
      Month: <select ng-model="SelectedMonth" ng-options="label for label in Months" ng-change="UpdateNumberOfDays()">
        <option value="">-- choose Month --</option></select>
    </div>
    <div>
      Day: <select ng-model="SelectedDay" ng-options="label for label in Days | limitTo:NumberOfDays">
        <option value="">-- choose Day --</option></select>
    </div>
  </div>
</body>

</html>

dear ashiq, but when i submit this, i need send the month id/number. show the month name but need to send month id. is it possible
When user select February , days should be 28/29. but its not working ur sample

Sarthak Jain · Accepted Answer · 2021-03-04 05:44:07Z

0

To add the default --select-- option, you can do the following. So whenever you select this option, the ngModel value will be '' -

Month: <select ng-model="SelectedMonth" ng-options="label for label in Months" ng-change="UpdateNumberOfDays()">
        <option value=""> --select-- </option>
      </select>

And if you are working a lot with dates, it's better to use a library like momentjs.

Import

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>

script.js

$scope.Months = moment.months(); // You can remove all the current logic that you have put to calculate the month array. 
// This method will directly give you the list of all month names.

answered Mar 4, 2021 at 5:44

Sarthak Jain

2,11614 silver badges19 bronze badges

Collectives™ on Stack Overflow

load date year day drop down using angular js issue

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related