Saving JQuery Datepicker to Multiple Fields (d/m/y) in Bean

I'm a super begier when it comes to Javascript/JQuery/HTML in general, apologies if my question is confusing. I'm trying to update legacy code front-end to use the JQuery datepicker instead of an old drop down menu. The back-end code (that I shouldn't change) uses a string variable for day, month, and year. I'm trying to save the values from datepicker directly into the bean, using the following js:

<script>
    $(function() {
        $(".datepicker").datepicker({
            dateFormat: "yy-mm-dd",
            changeYear: true,
            changeMonth: true,
            onSelect: function(dateText, inst) { 
                var date = $(this).datepicker('getDate');
                document.getElementById('enterAppForm:effectiveDay').value  = date.getDate();  
                document.getElementById('enterAppForm:effectiveMonth').value = date.getMonth() + 1;              
                document.getElementById('enterAppForm:effectiveYear').value =  date.getFullYear();
            }
        });
    });
</script>

I have the HTML as (inside <h:form id="enterAppForm"> with a lot of other things):

<h:inputText type="text" class="datepicker" id="effectiveDate" name="effectiveDate" />
<h:inputHidden id="effectiveDay" value="#{beanName.effectiveDay}" />
<h:inputHidden id="effectiveMonth" value="#{beanName.effectiveMonth}" />
<h:inputHidden id="effectiveYear" value="#{beanName.effectiveYear}" />

If I do something like:

day  = date.getDate(),  
month = date.getMonth() + 1,              
year =  date.getFullYear();
alert(day + '-' + month + '-' + year);

the values do show up correctly. However, the bean shows that it's receiving values of null for all 3 variables. I'm sure there's something basic that I'm not understanding, so if anyone can point me towards the right direction, I'd really appreciate it. I've seen examples with PrimeFaces, but this project doesn't use it.

P.S. This step would probably be trivial after I figure out my issue, but a validation js needs to grab var vEffectiveMonth = document.getElementById('enterAppForm:effectiveMonth'); for it to work. It shouldn't matter it's a hidden field, right? It was linked to the old drop down menu before.