DatePicker in Woocommerce (My Account) Registration [closed]

Question

I have googled for this and, did not find any solution.

I am trying to add Birth date (datepicker) field in woocommerce registration page.

The registration form has been created as per guidance posted here

I am using datepicker script available here

According to DatePicker documentation we have to add below code in order to make it work.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="glDatePicker.min.js"></script>

<script type="text/javascript">
    $(window).load(function()
    {
        $('input').glDatePicker();
    });
</script>

Problem is all other fields in the form start displaying calendar. This is because the javascript adds calendar to all the 'input' fields of the form.

How to solve this???

Code in functions.php ....

<p class="form-row form-row-wide">
<label for="reg_billing_birthdate"><?php _e( 'Birth Date', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="input-text" name="billing_birthdate" id="reg_billing_birthdate" gldp-id="mydate" value="<?php if ( ! empty( $_POST['billing_birthdate'] ) ) esc_attr_e( $_POST['billing_birthdate'] ); ?>" />
</p>

Answer 1

Don't include jquery from any other source, it will create conflict. Bcoz jQuery is pre bundled in wordpress by default.

For your question, add an id or class to the input element then add the datepicker based on the class. For example

<input type="text" class="da_test" value="" >

<script type="text/javascript">
    $(window).load(function()
    {
        $('.da_test').glDatePicker();
    });
</script>

This will avoid datepicker to appear in every input element.

Answer 2

Below changes worked....

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="glDatePicker.min.js"></script>

<script type="text/javascript">
$(window).load(function()
{
    $('#reg_billing_birthdate').glDatePicker();
});
</script>