bendrucker / angular-credit-cards

Angular directives for parsing and validating credit card inputs
MIT License
328 stars 98 forks source link

Expiration date (cc-exp) to work with one only input #67

Closed jmvalencia closed 9 years ago

jmvalencia commented 9 years ago

It would be great if the expiration date validation works with one regular input, that may or not be masked by ##/##(##) without the need to have the full template the directive uses right now, I love this module but I would appreciate if this can be done, currently Im including additional code to accomplish this, @bendrucker thanks in advance for paying attention and your help.

Example:

screen shot 2015-08-27 at 4 27 40 pm

bendrucker commented 9 years ago

Sorry, but this is way beyond the scope of what I can do right now, especially since I don't use Angular anymore. This is really tricky to get right and should be done in a separate package that's not coupled to Angular.

tyrw commented 9 years ago

I had the same request, and shut down just as quickly. It's straightforward and has as much reason to be "coupled to Angular" as anything else in the package...

My working code below in coffeescript, in case you're interested.

module.directive "ccExpCombined", () ->
  restrict: 'A'
  require: ['ngModel']
  compile: ($element, $attributes) ->
    $attributes.$set 'maxlength', '7'
    ($scope, $element, $attributes, controllers) ->
      ngModel = controllers[0]
      $scope.$watch $attributes.ngModel, (date) ->
        return unless date
        backspace = date.slice(-2) is ' /' and date.slice(-3) isnt '/ /'
        date = if backspace then '' else date.replace /[^\d]/g, ''
        mm = date.substring 0,2
        yy = date.substring 2,4
        mm = '0' + mm[0] if mm in ['2','3','4','5','6','7','8','9']
        update = if backspace or !mm or mm in ['0','1'] then mm else mm + ' / ' + yy
        ngModel.$setViewValue update
        ngModel.$render()

grab

bendrucker commented 9 years ago

I'll happily fix bugs but I'm not going to add new features here unless someone sends a fully ready PR that I can easily review. That's why the engine is standalone (creditcards).