Card: Example how to link expiry date to month & year dropdowns

:+1: This would be awesome, trying to figure out how to do it now, so will post anything I find

I couldn't get it to work with <select>s at all, so I used a dirty hack:

$('#ccexpirymonth, #ccexpiryyear').on('change', function () {
    // Set the value of a hidden input field for Card
    $('#expiry-date').val($('#ccexpirymonth').val() + '/' + $('#ccexpiryyear').val());
    // Trigger the "change" event manually
    var evt = document.createEvent('HTMLEvents');
    evt.initEvent('change', false, true);
    document.getElementById('expiry-date').dispatchEvent(evt);
});

The only reason we are not using this in production yet is because the usability of having a single input for expiration date is so confusing, where user needs to input both Month and Year; nobody seems to know how to go from month to year (should I type a "/" ? it's funny to see they always freeze at this point).

Also it's very common for them to type only the first 2 digits of the year ("19" in the 2019) or try to type the entire year "2019". Even if the form accepts both (it seems to), it's confusing because people never know if they got it right.

It's definitely the biggest friction point.

Anyway we could have it changed to 2 dropdowns <select>without using a hack ?

I'm going to close this as we'll be adding support for select dropdowns in #173.

Hi,

I don't understand why you have closed this issue ... I didn't find anything in the current version who allow something like select#expiry and not input. and their are no sulution in #173 to use month and year dropdown.
Ogone, who's a major payment provider in europe only support month / year dropdown adn we can't use this brillant extension with this payment provider.

leoetlino >> Please can you explain me what you do to make your dirty hack working ?
I can create the hidden field with value="10/19" (for october 2019) but it doesn't update the info in the photo of the credit card ... do you have a solution ?

Thanks a lot

@angelflo that's the piece of hacky code I'm using as a workaround (since one year ago), and it's still working for me.