如何让AngularJS的uib-datepicker兼容多种日期格式输入？

Got it, let's tackle this date input compatibility issue with AngularJS UI Bootstrap's datepicker. Since you can't upgrade AngularJS or install extra packages, we'll use built-in AngularJS features to add support for formats like 1/1/2018 or 01/01/18, while still normalizing the display to MM/dd/yyyy.

Option 1: Create a Reusable Custom Directive (Most Maintainable) #

We'll build a directive that adds flexible parsing and formatting to your date input using AngularJS's $parsers and $formatters pipeline—this is the standard way to extend form controls in AngularJS.

Step 1: Define the Directive #

angular.module('yourAppModule').directive('flexibleDateInput', ['$filter', function($filter) {
  return {
    require: 'ngModel',
    link: function(scope, element, attrs, ngModelCtrl) {
      // Custom parser: Convert user input string to Date object
      ngModelCtrl.$parsers.push(function(inputValue) {
        if (!inputValue) return null;
        
        // Try parsing with multiple formats
        let parsedDate = parseDate(inputValue);
        if (parsedDate) {
          // Update the view to show the normalized format
          ngModelCtrl.$setViewValue($filter('date')(parsedDate, 'MM/dd/yyyy'));
          ngModelCtrl.$render();
          return parsedDate;
        }
        
        // If parsing fails, return null (triggers validation error)
        return null;
      });

      // Custom formatter: Convert Date object back to normalized string for display
      ngModelCtrl.$formatters.push(function(dateValue) {
        if (dateValue) {
          return $filter('date')(dateValue, 'MM/dd/yyyy');
        }
        return '';
      });

      // Helper function to parse various date formats
      function parseDate(input) {
        // Format 1: MM/dd/yyyy (original supported format)
        let date = new Date(input);
        if (!isNaN(date.getTime())) return date;

        // Format 2: M/d/yyyy (e.g., 1/1/2018)
        if (input.match(/^\d{1}\/\d{1}\/\d{4}$/)) {
          const [month, day, year] = input.split('/').map(Number);
          date = new Date(year, month - 1, day);
          if (!isNaN(date.getTime())) return date;
        }

        // Format 3: MM/dd/yy or M/d/yy (e.g., 01/01/18 or 1/1/18)
        if (input.match(/^\d{1,2}\/\d{1,2}\/\d{2}$/)) {
          const [month, day, twoDigitYear] = input.split('/').map(Number);
          const fullYear = twoDigitYear < 50 ? 2000 + twoDigitYear : 1900 + twoDigitYear; // Adjust threshold as needed
          date = new Date(fullYear, month - 1, day);
          if (!isNaN(date.getTime())) return date;
        }

        return null;
      }
    }
  };
}]);

Step 2: Add the Directive to Your Input #

Update your existing datepicker input to include the flexible-date-input directive:

<input type="text" class="form-control has-error" 
       uib-datepicker-popup="{{format}}" 
       ng-model="processDTFrom.value" 
       ng-change="processDateSelected('date')" 
       is-open="popupProcessFrom.opened" 
       datepicker-options="dateOptions" 
       ng-required="true" 
       close-text="Close" 
       ng-disabled="selectedDateOptionPDF.name !== 'dateRange'"
       flexible-date-input /> <!-- Add this line -->

Option 2: Use UI Bootstrap's Built-in datepicker-parser (Quick Fix) #

If you prefer not to create a directive, UI Bootstrap's uib-datepicker-popup supports a datepicker-parser attribute where you can pass a custom parsing function.

Step 1: Define the Parser Function in Your Controller #

angular.module('yourAppModule').controller('YourController', ['$scope', '$filter', function($scope, $filter) {
  $scope.format = 'MM/dd/yyyy';

  $scope.customDateParser = function(input) {
    if (!input) return null;

    // Try default format first
    let date = new Date(input);
    if (!isNaN(date.getTime())) return date;

    // Handle M/d/yyyy
    if (input.match(/^\d{1}\/\d{1}\/\d{4}$/)) {
      const [month, day, year] = input.split('/').map(Number);
      date = new Date(year, month - 1, day);
      if (!isNaN(date.getTime())) return date;
    }

    // Handle two-digit year formats
    if (input.match(/^\d{1,2}\/\d{1,2}\/\d{2}$/)) {
      const [month, day, twoDigitYear] = input.split('/').map(Number);
      const fullYear = twoDigitYear < 50 ? 2000 + twoDigitYear : 1900 + twoDigitYear;
      date = new Date(fullYear, month - 1, day);
      if (!isNaN(date.getTime())) return date;
    }

    return null;
  };
}]);

Step 2: Attach the Parser to Your Input #

Add the datepicker-parser attribute pointing to your function:

<input type="text" class="form-control has-error" 
       uib-datepicker-popup="{{format}}" 
       ng-model="processDTFrom.value" 
       ng-change="processDateSelected('date')" 
       is-open="popupProcessFrom.opened" 
       datepicker-options="dateOptions" 
       ng-required="true" 
       close-text="Close" 
       ng-disabled="selectedDateOptionPDF.name !== 'dateRange'"
       datepicker-parser="customDateParser" /> <!-- Add this line -->

Key Notes #

• Both solutions will automatically normalize the displayed date to MM/dd/yyyy after the user inputs a valid date (even if they typed 1/1/18, it'll show 01/01/2018).
• The two-digit year threshold (50 in the code) can be adjusted based on your needs—for example, if you expect years up to 2099, set it to 100 instead.
• Validation still works as expected: invalid inputs (like 13/32/2018) will trigger the has-error class since the parser returns null.

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