CODEWITHSUNDEEP
javascriptdatetimepicker
Indrid
Indrid

Reputation: 1182

Javascript datetimepicker get value on change

I am trying to intercept changes to a WooCommerce Extra product options datetimepicker component. Essentially, it's just a datetimepicker.

I have:

<script>
    var box = document.getElementById("myDateTimePicker");
    //console.log("#devlog: Active");  

    box.addEventListener("blur", function(){
        var selectedDate = box.value;
        console.log(selectedDate);    
  });
</script>

Which is almost working. It outputs the previous value contained by the datetimepicker, not the value it has just been changed to.

I've tried a range of events in the eventListener but nothing seems to do the trick. Could some kind soul put me out my misery and clue me in to how to get the NEW value from the datetimepicker when it is changed? Thanks.

Update:

Here is the html from the form. The component I'm fighting with is the date-picker inside the last <tr>.

<form class="cart" action="http://blahblahblah:8888/product/191/" method="post" enctype='multipart/form-data'>
    <input type="hidden" id="thwepof_product_fields" name="thwepof_product_fields" value="name_of_skater,tel_number,which_day" />
    <table class="thwepo-extra-options thwepo_simple" cellspacing="0">
        <tbody>
            <tr>
                <td colspan="2" class="section-title">
                    <h3 class="">Mandatory information</h3></td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Name of skater</label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="text" id="name_of_skater" name="name_of_skater" value="" class="thwepof-input-field validate-required">
                </td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Telephone number</label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="tel" id="tel_number" name="tel_number" value="" class="thwepof-input-field validate-required">
                </td>
            </tr>
            <tr class="">
                <td class="label leftside">
                    <label class="label-tag ">Pick a day <b>only</b></label> <abbr class="required" title="Required">*</abbr></td>
                <td class="value leftside">
                    <input type="text" autocomplete="off" id="which_day" name="which_day" value="" class="thwepof-input-field thwepof-date-picker validate-required" data-readonly="no">
                </td>
            </tr>
        </tbody>
    </table>
    <div class="quantity hidden">
        <input type="hidden" id="quantity_5e583e6ca4c48" class="qty" name="quantity" value="1" />
    </div>

    <button type="submit" name="add-to-cart" value="191" class="single_add_to_cart_button button alt">Add to basket</button>

</form>

Upvotes: 0

Views: 630

Answers (1)

dandemo
dandemo

Reputation: 397

You can try this:

document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}

You might be able to use this.value, but I wrote it the long way just in case.

Hope this helps.

Upvotes: 1

Related Questions