Generating a dropdown menu for Date of Birth by utilizing ng-repeat, with the first few elements of the dropdown menu

Currently, I am working on creating a Date of Birth picker Dropdown using ng-repeat. One issue that I'm encountering is the need to append the options as DD for Day, MM for Month, and YYYY for Year in the dropdown menu as the initial elements. Here is the code snippet that I've been utilizing for generating the dropdown:

  <div ng-app="myapp">
     <div ng-controller="ctrlParent">
       <select class="day" id="DateOfBirth_Day" name="DateOfBirthDay" required ng-model="dobday">
         <option ng-repeat="i in getNumber(days) track by $index" value="{{$index+1}}">{{$index+1}}</option>
       </select>
    </div>
  </div>

The controller code included is as follows:

    var app = angular.module('myapp',[]);
    app.controller('ctrlParent',function($scope){
       $scope.days= 31;
       $scope.getNumber = function(num) {
         return new Array(num);   
       }
     });

Answer №1

If you want to tackle it this way: http://jsbin.com/OgoqUWe/2/edit

JavaScript

angular.module('example', ['ngRoute']);

var example = angular.module('example').controller('MainController', function ($scope) {
  $scope.birthday = 'DD';
  $scope.numOfDays = 31;
  $scope.getNumber = function(num) {
    return new Array(num);   
  };
});

HTML

<select class="day" id="BirthDate_Day" name="BirthDateDay" required ng-model="birthday">
  <option value="DD">DD</option>
  <option ng-repeat="i in getNumber(numOfDays) track by $index" value="{{$index+1}}">{{$index+1}}</option>
</select>

For another approach using ng-options:

JavaScript

angular.module('example', ['ngRoute']);

var example = angular.module('example').controller('MainController', function ($scope) {
  $scope.birthday = 'DD';
  $scope.numOfDays = 31;
  $scope.numbers = ['DD'];
  for (var i = 0; i < $scope.numOfDays; i += 1) {
    $scope.numbers.push(i + 1);
  }
});

HTML

<form action="">
  <select class="day" id="BirthDate_Day" name="BirthDateDay" required ng-pattern="\d+" ng-model="birthday" ng-options="option for option in numbers">
  </select>
</form>

Answer №2

Here is a different approach to display the Date of Birth

Using JavaScript

angular.module('app', ['ngRoute']);

var app = angular.module('app').controller('MainController', function ($scope) {
  $scope.totalDays = 31;
  $scope.totalMonths = 12;
  $scope.totalYears = 150;

  $scope.days = [];
  for (var i = 0; i < $scope.totalDays; i += 1) {
      $scope.days.push(i + 1);
  }

  $scope.months = [];
  for (var i = 0; i < $scope.totalMonths; i += 1) {
      $scope.months.push(i + 1);
  }

  $scope.years = [];
  var currentYear = new Date().getFullYear();
  for (var i = currentYear; i > currentYear - $scope.totalYears; i--) {
      $scope.years.push(i - 1);
  }
});

Using HTML

<div class="row">
  <div class="col-lg-4">
    <label>Select Month</label>
    <select class="form-control" multiple ng-model="users.month" ng-options="o for o in months" required>
      <option value="MM">MM</option>
    </select>
  </div>
  <div class="col-lg-4">
    <label>Select Day</label>
    <select class="form-control" multiple ng-model="users.day" ng-options="o for o in days" required>
      <option value="DD">DD</option>
    </select>
  </div>
  <div class="col-lg-4">
    <label>Select Year</label>
    <select class="form-control" multiple ng-model="users.year" ng-options="o for o in years" required>
      <option value="YYYY">YYYY</option>
    </select>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

single calendar bootstrap-datepicker allowing users to select date ranges

Is it possible to create a single calendar range date picker with Bootstrap instead of using two separate calendars? Currently, I have implemented a solution with two calendars. $('#datepicker').datepicker({ }); <link href="https://cdnjs.cl ...

"Utilizing Ajax for Form Validation in Zend Framework 2 - Is it

After following a tutorial, I encountered an issue with my code. The tutorial I followed can be found at the following link: I need help resolving the problem in my code. When I submit the form, the function to validate and save the data is being called ...

Do not procrastinate when updating the navbar elements while navigating through pages

This specific NextJS code is designed to alter the color of the Navbar elements once scrolling reaches 950px from the top or when navigating to a different page that includes the Navbar. Strangely, there seems to be a delay in updating the Navbar colors wh ...

Comparison between the sluggishness of radio buttons in Internet Explorer 10 versus Chrome when using jQuery

When using IE 10, Chrome, and jquery 1.10.2 with the standard template from Visual Studio 2013 (.Net 4.5), I encounter an issue with radio buttons. Upon clicking a radio button, two actions are supposed to occur: 1. Recreation of all the radio buttons. 2 ...

The value of an object is replaced when a general method is called for the second time

I seem to be missing a fundamental concept in programming as I am encountering an unusual issue that I have never faced before. Let me illustrate my problem through this code snippet: var result = {abc: 10, cde: 20, efg: 30}; var final_result = {}; var c ...

"Despite encountering an error, the jQuery AJAX request remains active and continues to

Check out this code snippet I created. early_face_detect=$.ajax({ type: "POST", url: "earlydetect.py", timeout: 15000, success: function(respond) { var s=grab_early_details(respond); }, error: function(xmlhttprequest, textstatus, message) ...

The distinction between a JSON file that is generated dynamically from a response and one that is

I've been working on configuring a bootstrap typeahead feature and here is the jquery code I am using: $(function () { $.ajax({ type: "GET", url: "http://example.com/search?callback=my_callback", data: { keyword: &apos ...

"Effortlessly transform a JSON string into a JSON Object with JavaScript - here's how

When I serialize my object using the ASP.net JavaScriptSerializer class and return it to the client side, how can I deserialize the string in JavaScript? ...

Issue with inconsistent error handling in Mui DateTimePicker and react-hook-form

I am currently facing an issue with a DateTimePicker component that I am trying to integrate into a form controlled by react-hook-form. The validation is straightforward - I am using the disablePast prop on the DateTimePicker to ensure that the selected da ...

Maintaining current object relationships in the React state

I'm currently grappling with the challenge of creating a JSON model for managing state in a React component. Previously, I relied on Entity Framework and virtual properties to establish relationships between "tables." However, transitioning to React a ...

Hello there, I'm currently attempting to use the Material UI IconButton along with an input ref to upload an image, but I'm experiencing some

click to view the UI image here Hi! I'm attempting to include a Material UI button to upload an image, but it's not functioning as expected. Below is the code snippet and a link to the sandbox where I'm trying to achieve functionality simil ...

Ways to break apart a string of text without a regular pattern

Here is the data I am working with: Huawei Y7P Art-L28 (4/64gb) (AAAAAAAAAAAAAA) EXP:02/19/2020 Huawei Y9 prime 2019 (BBBBBBBBBBBBBBB) EXP:07/17/2019 Oppo A31 4gb/128gb (CCCCCCCCCCCCCCC) Vivo Y15 5000mah 4GB/64GB (1901) (DDDDDDDDDDDDDDD) EXP:06/14/2019 I ...

Passing parameters from JavaScript to a PHP class and sending the response back to JavaScript: A comprehensive guide

I am attempting to utilize a PHP Class along with JavaScript, but I need to adjust the class in order to pass a parameter to it. Since my knowledge of PHP is limited, I am unsure how to accomplish this. The class provided below uses a static variable $si ...

What are the steps to incorporate npm into a Wix website editor?

Has anyone successfully installed Twilio on the Wix website editor? I can't seem to locate any console or npm. Any tips on how to get it up and running? ...

Filter an array of objects using criteria from a separate array [TypeScript/JavaScript]

I am faced with a scenario where I have two dropdowns, each designed to filter specific keys of an object. The key feature here is that the dropdown selections should not depend on each other; in other words, filtering can occur independently based on the ...

Having Trouble with the JSX React HTML5 Input Slider

I'm currently utilizing React.JS for a project, where I am creating a range input slider with two options as part of a component. This is the code snippet in question: <input id="typeinp" type="range" min="0" max="5" value="3" step="1"/> Upon ...

Error: The property 'length' of the undefined cannot be read

I am currently working on developing a node.js application and integrating a scheduler app into it. I found a helpful guide that I am following: However, when I try to access the /data page, I encounter an error message stating "cannot read property &apos ...

Connecting MySql database with Firefox Addon

Is there a way to connect a MySql database that is hosted on an online hosting service using JavaScript and WebExtensions APIs? If so, how can I go about programming this? Any advice or suggestions would be greatly appreciated! Thank you in advance for yo ...

Innovative functionality for adding and deleting elements in JQuery/JavaScript

Is there a way to dynamically add and remove items when the Append/Clear buttons are clicked using this code snippet? $("#btn1").click(function(){ $("ul").prepend("<li>List Item</li>"); }); $("#btn2").click(function(){ $("ul").remove ...

How can the Angular Js framework be utilized to create a pop-up feature in combination with Bootstrap?

I'm currently working on a website using AngularJS and Bootstrap. When the site is loading, I make a server call to fetch some data. This process takes some time, and during this interval, I want to display a pop-up message indicating that the user s ...