如何实现输入字段禁用指定天数/按月限制表单每月仅更新一次？

Since you're working with AngularJS (I spot that ng-model in your code), we'll tie the ng-disabled directive to a controller variable that checks time elapsed since the last form submission. Here's a step-by-step implementation:

Step 1: Track Submission Date #

When the user submits the form, store the submission date (we'll use localStorage for client-side persistence; for stricter control, use your backend database instead):

angular.module('yourAppName', [])
.controller('YearController', function($scope) {
  // Initialize disable state
  $scope.isInputDisabled = false;

  // Check last submission date when the controller loads
  const lastSubmissionDate = localStorage.getItem('lastMonthSubmission');
  if (lastSubmissionDate) {
    const lastDate = new Date(lastSubmissionDate);
    const currentDate = new Date();

    // Option 1: Disable for exactly 30 days after submission (matches your "next month" request)
    const daysElapsed = Math.floor((currentDate - lastDate) / (1000 * 60 * 60 * 24));
    $scope.isInputDisabled = daysElapsed < 30;

    // Option 2: Disable for the rest of the calendar month (strict monthly limit)
    // $scope.isInputDisabled = lastDate.getFullYear() === currentDate.getFullYear() && 
    //                          lastDate.getMonth() === currentDate.getMonth();
  }

  // Form submission handler
  $scope.handleSubmission = function() {
    if ($scope.yourFormName.$valid) {
      // Store the current submission date
      localStorage.setItem('lastMonthSubmission', new Date().toISOString());
      // Immediately disable the input after successful submission
      $scope.isInputDisabled = true;
      // Add your API call or other submission logic here
    }
  };
});

Step 2: Update Your Input Field #

Add the ng-disabled directive to your existing input (and optionally the submit button to prevent duplicate attempts):

<form name="yourFormName" ng-submit="handleSubmission()">
  <input 
    type="number" 
    min="1" 
    name="month" 
    ng-model="year.month" 
    class="form-control" 
    required 
    ng-disabled="isInputDisabled"
  />
  <button type="submit" ng-disabled="isInputDisabled">Submit Update</button>
</form>

This flexible approach works for any custom number of days (e.g., 7 days, 14 days):

Core Logic #

Calculate the difference between the current date and the last submission date, then disable the input if elapsed days are less than your target:

// In your controller
const disabledDays = 7; // Replace with your desired number of days
const lastSubmission = localStorage.getItem('lastSubmission');

if (lastSubmission) {
  const lastDate = new Date(lastSubmission);
  const currentDate = new Date();
  const daysElapsed = Math.floor((currentDate - lastDate) / (1000 * 60 * 60 * 24));
  $scope.isInputDisabled = daysElapsed < disabledDays;
}

Critical Security Tip #

Frontend-only checks are easily bypassed (users can edit localStorage values). For important restrictions:

• Store the last submission date in your backend database tied to the user account.
• When the user tries to submit a new update, your server should verify that the required time has passed before accepting the request.

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