JavaScript datetimepicker更改时获得价值

Question

我正在尝试拦截对WooCommerce Extra产品选项datetimepicker组件的更改。本质上，它只是一个日期时间选择器。

我有：

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

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

哪个几乎]正在工作。它输出datetimepicker包含的先前值，而不是刚刚更改为的值。

我已经在eventListener中尝试了一系列事件，但似乎无济于事。有什么好心的人可以将我的痛苦排除在外，并提示我如何从datetimepicker更改时获取新值吗？谢谢。

更新：

这里是表单中的html。我要处理的组件是最后一个<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>

我正在尝试拦截对WooCommerce Extra产品选项datetimepicker组件的更改。本质上，它只是一个日期时间选择器。我有：

您可以尝试以下方法：

document.getElementById('myDateTimePicker').onChange = function() {
console.log(document.getElementById('myDateTimePicker').value);
}
您也许可以使用this.value，但我写的很长，以防万一。

希望这会有所帮助。

Answer 1

您可以尝试以下方法：