Tips for setting limitations on a date picker's minimum and maximum values on an iPhone using JavaScript

I have encountered an issue with my JavaScript function that sets min and max values for the input type date. While it works perfectly on Android devices, I am facing a problem on iPhone where I am unable to restrict the calendar with the specified min and max values.

Below is the snippet of my code:

JavaScript:

 var today = new Date();
var maxAge = 18;
var minAge = 130;
vm.maxAge = new Date(today.getFullYear() - maxAge, today.getMonth(), today.getDate());
vm.minAge = new Date(today.getFullYear() - minAge, today.getMonth(), today.getDate());

HTML:

     <input id="date" type="date"  name="dateOfBirth" ng-model="dateOfBirth" placeholder="MM/DD/YYYY" ng-required="true" min="{{minAge | date:'yyyy-MM-dd'}}" max="{{maxAge | date:'yyyy-MM-dd'}}" />

Answer №1

It appears that a curly brace is missing, please double check

 <input id="date" type="date"  name="dateOfBirth" ng-model="dateOfBirth" placeholder="MM/DD/YYYY" ng-required="true" min="{{minAge | date:'yyyy-MM-dd'}}" max="{{maxAge | date:'yyyy-MM-dd'}}" /

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

Searching JSON Data for Specific String Value Using JavaScript

I am looking for a straightforward approach to search my JSON string using JavaScript. Below is the PHP code that generates my JSON String: <?php $allnames = array(); $res = mysql_query("SELECT first,last FROM `tbl_names`"); while ($row = mysql_fetch_ ...

JavaScript: Exploring Content Inside Headers

Using document.body.innerHTML allows you to search within the body of a webpage. Is there an equivalent method for searching within the "Head" section? I've been looking around but so far, I haven't come across any such function. ...

Associate the right-click action with Angular Material

I'm currently working with Angular Material. My goal is to develop a directive that allows me to trigger a right-click event on an element. This is what I have attempted so far: JavaScript: app.directive('rightClick', ["$parse", function ...

Do not fulfill the promise until all the images have finished loading

Below is the intended process: Iterate through a collection of img tags Retrieve each tag's src URL Convert it to a base64 encoded string using an HTML 5 canvas Once all images have been converted, resolve the promise and call the callback function ...

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Is there a way to handle an AngularJS template using a syntax similar to Handlebar? <script type="text/ng-template" id="mytemplate"> Name is {{name}} </script> I know how to retrieve the template using $templateCache.get('mytemplate&ap ...

Tips on displaying an array of elements as a <Dialog> within a <List>

I am currently developing a <ElementList> component that is designed to accept an array of elements through props and create a <List>, with each <ListItem> representing an element in the array. I have also included a separate component ca ...

Transferring data between two "Data" elements using Jquery Datatable

Utilizing the JQuery datatable, I have made the first column of my table clickable, which is labeled as RequestNo. Here's the code snippet: "ajax": { "url": "/Request/Search/LoadData", "type": "POST", "datatype": "j ...

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

I've been working on creating a JavaScript game and am currently tackling the challenge of implementing gravity. One crucial aspect I need to address is creating an infinite loop without causing the browser to crash. Is there a way for me to include a ...

Symfony/encore requires devDependencies in order to successfully compile

My experience with Symfony5 and encore has been smooth until I attempted to deploy to production. In order to install dependencies, you can use the command npm install --production. To compile, run npm run build --prod. I encountered an issue when trying ...

What is the best way to retrieve all collections and their respective documents in Firestore using cloud functions?

Seeking to retrieve an array structured as [1year, 1month, etc] with each containing arrays of documents. Currently encountering a challenge where the returned array is empty despite correct snapshot sizes. Unsure if issue lies with push() method implemen ...

Can someone show me how to implement arrow functions within React components?

I am facing an issue while working on a node and react project. Whenever I use an arrow function, it shows an error stating that the function is not defined. Despite trying various tutorials and guides, I am unable to resolve this issue. Below is the snipp ...

AngularJS disregarding white spaces within text

Can anyone help me figure out how to prevent AngularJS from ignoring whitespace characters in strings? I'm attempting to enforce password requirements using an AngularJS directive and a regex pattern, but I don't want leading or trailing whitespa ...

Unable to modify the color of UML state elements within JointJS

I need some help with jointjs as I am in the process of adjusting the color of a UML state diagram graph using this command: graph.getElements()[4].attributes.attrs[".uml-state-body"]["fill"] = "#ff0000"; However, despite trying this, the color of the st ...

Tracking current page path changes with UI-router for Google Analytics

I am currently facing challenges in obtaining the path of the state to be sent to Google Analytics. The use of abstract states complicates this process, as using something like toState.url does not capture the entire URL. My initial approach was to utiliz ...

Activate the function for items that are overlapping

Here is a scenario I am working on: HTML <body> <div> <p>Text</p> </div> <body> JQuery $('div').click(function(){ $(this).find('p').fadeToggle('fast'); }); $('bo ...

The UIImageView fails to automatically adjust its size to fit the UIImage it contains

I am facing an issue with my UIImageView and Auto-layout in the container margins. When I assign a UIImage to it in the ViewController using UIViewContentModeScaleAspectFit, everything looks great with the image centered as desired. However, when I give th ...

Enlarging a JSON structure exported from Clara.IO using Three.js

As a beginner in Three.JS, I have been honing my skills in creating scenes and models. Recently, I imported a washing machine model into my scene and positioned it accordingly. Now, I am trying to scale it up to make it larger, but I am unsure of how to do ...

Converting Node JS request to an API into React Fetch syntax

I have encountered a problem while developing an app in React-Native that connects with the Hubspot API. Initially, I tried to make the request using the Node JS request module, but it didn't work well with React Native when Expo was involved. Now, I ...

The resize function fails to trigger when it is required

Struggling to get this code working properly. If the window width is greater than 800, I want 6 images with a red background. If the window width is less than 800, I want 4 images with a blue background. I need this functionality to work both on r ...

"Create a smooth transition effect in CSS by fading out one div and fading in

I've set up a grid of buttons, and my goal is to have the grid fade out when a button is clicked, then fade in with a new div in its place. This involves animating opacity from 1 to 0 and vice versa while toggling the display:none property for content ...