JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<span id="fakeDate"></span>

<div class="unit size1of2 expiration-date">
    <div class="unit size1of3 control-group expiration-month select error">
        <select required="required" name="one_step[step2][payment][creditCardExpirationMonth]" id="one_step_step2_payment_creditCardExpirationMonth" class="error">
            <option selected="selected" value="">Gültig bis Monat</option>
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
            <option value="4">04</option>
            <option value="5">05</option>
            <option value="6">06</option>
            <option value="7">07</option>
            <option value="8">08</option>
            <option value="9">09</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
        </select>
        <label for="one_step_step2_payment_creditCardExpirationMonth" class="error" style="display: none;">Bitte füllen Sie dieses Feld aus.</label>
    </div>
    <div class="unit size1of3 control-group expiration-year select">
        <select data-msg-ccdate="Ihre Kredikarte muss noch gültig sein." required="required" name="one_step[step2][payment][creditCardExpirationYear]" id="one_step_step2_payment_creditCardExpirationYear">
            <option selected="selected" value="">Gültig bis Jahr</option>
            <option value="2014">2014</option>
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
            <option value="2021">2021</option>
            <option value="2022">2022</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
    </div>
</div>

JavaScript

(function () {
    var currentDate = new Date(),
        currentMonth = currentDate.getMonth() + 1 + 6,
        currentYear = currentDate.getFullYear(),
        month = $('div.expiration-month').find('select'),
        year = $('div.expiration-year').find('select');

    //fake current date
    $('#fakeDate').html('Monat: ' + currentMonth + ', Jahr: ' + currentYear);

    month.on('change', function () {
        var value = this.value && this.value < currentMonth,
            find = year.find('option[value="' + currentYear + '"]');

        //check if selected month is lower than current
        if(value){
            find.removeAttr('selected');
        }
        find.toggle(!value);
    });

    console.log(currentDate, currentMonth, currentYear, month, year);
})();