Ionic 1 iOS平台input type date的max属性失效问题求助

Hey Frank, sorry to hear you're stuck with this date input problem—let's get it sorted out for you before Thursday! The native <input type="date">'s max attribute can act up on iOS in Ionic 1 due to WebView quirks, but we have a couple of reliable fixes:

Option 1: Use Ionic 1's Built-in ion-datetime Component #

Ionic 1 has a purpose-built date picker that handles cross-platform inconsistencies way better than the native input. Swap out your current code with this:

<ion-datetime ng-model="selectedDate" max="2018-04-03" required></ion-datetime>

This component is optimized for iOS, so the max constraint should enforce the date limit without extra work. Just make sure you bind it to a valid AngularJS model (like selectedDate in your controller).

Option 2: Add Manual Validation for Native Input #

If you need to stick with the native <input type="date">, you can add custom JavaScript validation to work around iOS's WebView limitations:

1. First, give your input an ID and bind a change event:

<input type="date" id="customDateInput" max="2018-04-03" required ng-change="checkMaxDate()">

2. Add this validation logic to your AngularJS controller:

angular.module('yourAppName').controller('YourController', function($scope) {
  $scope.checkMaxDate = function() {
    const dateInput = document.getElementById('customDateInput');
    const selected = new Date(dateInput.value);
    const maxAllowed = new Date(dateInput.max);

    if (selected > maxAllowed) {
      dateInput.setCustomValidity('Date cannot be later than 2018-04-03');
    } else {
      dateInput.setCustomValidity(''); // Clear error if valid
    }
  };
});

This will manually check the selected date against the max and show a validation error if it's out of bounds.

Quick Check: iOS Version Compatibility #

Older iOS versions (pre-iOS 10) have known bugs with the native date input's max attribute. If your app supports these versions, the ion-datetime approach is definitely the more reliable choice.

Either of these solutions should get your max date constraint working properly on iOS. Let me know if you hit any bumps while implementing this—I’m here to help!

内容的提问来源于stack exchange，提问作者Frank Andrew